vue.js引入jquery和bootstrap教程

一、引入jquery：

　　1)在根目录下运行：npm install jquery --save-dev，把jquery引入到项目；

　　2)修改webpack.base.conf.js文件（在build目录下）：

　　　　a.在webpack.base.conf.js上面添加var webpack = require("webpack")；

　　　　b.在webpack.base.conf.js上面的module.exports添加：

　　　　　　

　　　　　　plugins: [ 
　　　　　　　　new webpack.optimize.CommonsChunkPlugin('common.js'), 
　　　　　　　　new webpack.ProvidePlugin({ 
　　　　　　　　jQuery: "jquery", 
　　　　　　　　$: "jquery"
　　　　　　})]

　　　　c.在main.js中引入jquery:import $ from 'jquery'。

二、引入bootstrap:

　　1)在根目录下运行：npm install bootstrap --save-dev；

　　2)在c.在main.js中引入bootstrap:

　　　　a.import 'bootstrap/dist/js/bootstrap.min.js'

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

 　　注：

　　　　1）因为运行npm install bootstrap --save-dev了，所以不需要修改webpack.base.conf.js了：

　　　　

　　　　　　resolve: {
    　　　　　　extensions: ['.js', '.vue', '.json'],
    　　　　　　alias: {
      　　　　　　'vue$': 'vue/dist/vue.esm.js',
      　　　　　　'@': resolve('src'),
      　　　　　　'bootstrap':resolve('src/assets/bootstrap')，//如果是手动导入bootstrap的话需要加这一句，如果是npm install bootstrap --save的话不需要写这个了
    　　　　　　}
   　　　　}

　　　　2)因为是通过运行npm install jquery --save-dev和npm install bootstrap --save-dev引入的，所以不需要下载jquery和bootstrap放到项目中

　　　　3)查看package.json的"devDependencies": {}里是否有jquery和bootstrap版本信息