vue.js项目实用技巧总结

序

Vue.js是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue采用自下而上的增量开发设计。Vue的核心库只关注视图层，很容易学习并与其他库或现有项目集成。另一方面，Vue完全能够驱动使用Vue生态系统支持的单文件组件和库开发的复杂单页应用程序。

#将Bootstrap引入Vue项目

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

1.安装jQuery

Npm安装jquery2，安装引导

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

安装后，项目将不会运行。虽然两者都已成功安装，但仍然会报告错误“Bootstrap的JavaScript需要jQuery NPM”。为了解决这个问题，可以在main.js条目文件中引入如下内容：

从' jquery '窗口导入$ jquery=$ require(' Bootstrap ')接下来，为了使用Bootstrap样式，可以在条目文件中引入bootstrap.css。这与引入元素用户界面的方法相同

导入“bootstrap/dist/CSS/bootstrap . min . CSS”#关闭eslint代码检查

很多人说关闭eslint检查的方法是在build/webpack.base.conf.js文件中注释掉eslint配置的这一部分。不知道是不是因为Vue-cli版本的更新，但实际上并不奏效。

正确的做法是将config/index.js文件中dev对象的useEslint属性改为false，官方的评论也很明确

#关闭一些eslint规则

实际上，eslint代码检查非常好，它不仅规范了个人js的编写，而且在团队和人员的协同开发中也起着非常重要的作用。但是有时候，这些规则有点太死板了。例如，声明一个未使用的变量将报告一个“没有未使用的变量”的错误。如果要关闭这个规则，可以打开eslintrc.js文件，将对应的规则改为0，然后就可以关闭了。

#修改端口号

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

#设置文件引用路径别名

有时项目文件太多，引用像./././static/data/xx.json '经常出现，写起来比较麻烦，经常容易出错(当然代码编译器能不能提示也没关系)。为了简化路径，我们可以在build/webpack.base.conf.js中配置别名

这里，调用resolve方法来简化路径。比如可以直接用@代替src，也可以直接写‘API/xx . js’，不用一层一层找

#世界协调时时间

使用VueHighcharts组件时，默认情况下会使用UTC时间，因此在时间显示方面始终存在空白。例如，此时的时间是2017年11月23日的183，336，007分钟，但下图中UTC时间显示的时间是103，336，007分钟

阅读文档后，我知道我想将useUTC选项更改为false，但我不知道从哪里开始。事实上，在main.js中引入组件的同时，我们可以进行相关的配置修改

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。