vue.js项目中实用的小技巧汇总

这篇文章主要为大家详细介绍了vue.js项目中实用的小技巧汇总，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

前言

 

Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

 

# 在Vue 项目中引入Bootstrap

 

有时在vue项目中会根据需求引入Bootstrap，而Bootstrap又是依赖于jQuery的，在使用npm安装时，可能会出现一系列的错误

1、安装jQuery

代码如下：

npm install jquery

2、安装Bootstrap

代码如下：

npm install bootstrap@3

以上两步，也可以先在package.json 配置文件中指定版本号，然后运行 npm install

安装完了以后项目是跑不起来的，尽管二者都已经安装成功了，但还是会报错 “Bootstrap's JavaScript requires jQuery npm”，为了解决这个问题，可以在 main.js 入口文件中这样引入：

代码如下：

import $ from 'jquery'
window.jQuery = $
require('bootstrap')

接下来，为了能够使用 Bootstrap的样式，可以在入口文件中引入 bootstrap.css。这个跟引入 Element UI 的方法一样

代码如下：

import 'bootstrap/dist/css/bootstrap.min.css'

 

# 关闭 eslint 代码检查

 

很多人说关闭eslint检查的方式是注释掉 build/webpack.base.conf.js 文件中关于eslint配置的这一部分。不知道是否因为Vue-cli 版本更新的缘故，在实际操作中，这样是行不通的。

【q1010.com温馨提示：图片暂缺】

正确的做法是把 config/index.js 文件中 dev 对象的useEslint 属性改为false，官方的注释也说的很清楚

【q1010.com温馨提示：图片暂缺】

 

# 关闭部分eslint规则

 

其实 eslint 代码检查是非常好的，不仅规范个人的js书写，在团队多人协作开发中，更是起到了非常重要的作用。但有时候，这些规则有点过于死板，比如声明一个未使用的变量就会报错 “no-unused-vars”，想要关闭这个规则的话，可以打开 eslintrc.js 文件，将对应的规则改为0，即可关闭

【q1010.com温馨提示：图片暂缺】

 

# 修改端口号

 

大多数项目默认是监听80端口，所以为了同时运行多个项目，可以在 config/index.js 中修改端口号

【q1010.com温馨提示：图片暂缺】

 

# 设置文件引用路径别名

 

有时候项目文件过多，可能经常出现类似 "../../../static/data/xx.json" 这样的引用，写起来很麻烦而且经常容易出错（当然代码编译器能够提示就无所谓了），为了简化路径，我们可以在 build/webpack.base.conf.js 中去配置别名

【q1010.com温馨提示：图片暂缺】

这里是通过调用 resolve 方法来达到简化路径的目的，比如可以直接用@来取代src，也可以直接写 "api/xx.js"，而不用一层一层的去找

 

# UTC time

 

在使用VueHighcharts 组件时，默认是使用 UTC time的，所以时间总是显示的有差距，比如此刻的时间是2017年11月23日18:07分，但是UTC time显示的时间却是下图中的10:07

【q1010.com温馨提示：图片暂缺】

看了文档都知道要把 useUTC 选项改为false，但就是不知从哪下手。其实，在main.js中引入组件的同时，我们就可以做相关的配置修改

【q1010.com温馨提示：图片暂缺】

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对四海网的支持。

本文来自：http://www.q1010.com/184/4242-0.html

注：关于vue.js项目中实用的小技巧汇总的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js