用vue构建项目笔记3(引入jquery和bootstrap)

其实用了vue以后，并不建议再去用jquery.   vue是视图与数据双向绑定，可以通过操作数据来控制dom，好处多多，但是有的时候还是不得不引入jq的，比如我们要用bootstrap。

作为前端，切图也是很必要的技能，写适配的css代码量是一个很恐怖的事情，而且要考虑的东西比较多，难免有遗漏，造成BUG。而引入bootstrap后，优秀的的栅格系统以及适配能力，会省很多事情。所以引入bootstrap不可避免，而bootstrap完全依赖于jq。。。。

1、npm install jQuery --save-dev         //用npm下载jq依赖

2、找到build文件夹下的webpack.base.conf.js    加入var webpack=require('webpack');

在module.exports加入

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery')
    }
  }

3、在main.js中加入import jquery from 'jquery'

至此，引入jq完成

引入bootstrap只需要在main.js中写入

import './assets/bootstrap/css/bootstrap.min.css'  
import './assets/bootstrap/js/bootstrap.min.js'  

并在assets的对应路径放入bootstrap文件即可。

下面就可以在组件中使用bootstrap了

注意：根据实测，我这样流程肯定是没问题的，最后配置完成后需要重新npm run dev,因为webpack.base.conf.js不会实时更新