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

小云云

发布时间：2017-12-12 15:04:18

2271人浏览过

来源于php中文网

原创

vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，vue 采用自底向上增量开发的设计。vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，vue 完全有能力驱动采用单文件组件和 vue 生态系统支持的库开发的复杂单页应用。本文主要给大家介绍了关于vue.js项目中实用的小技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，希望能帮助到大家。

# 在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 代码检查

Yes!SUN企业网站系统 3.5 Build 20100303

Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表

下载

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

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

# 关闭部分eslint规则

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