vue基础20(webpack模板引入jquery和bootstrap)

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

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

1、安装jQuery

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

2、找到build文件夹下的webpack.base.conf.js    加入

//配置jquery使用
const webpack = require('webpack');

在webpack.base.conf.js  中的  module.exports加入

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

界面截图

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

至此，引入jq完成

引入bootstrap方法

1、安装bootstrap依赖

npm install bootstrap --save         
//用npm下载bootstrap依赖

2在app.vue中写入

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

见截图

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