vue+jQuery+bootstrap整合

前端技术栈整合

1.  vue-cli的安装

　　gitbash指令： npm install -g @vue/版本号

注：npm view vue-cli versions --json 查看可用vue版本

2. 利用vue-cli创建项目

gitbash指令：vue init webpack 项目名

3. 安装jQuery

gitbash指令：npm install   --save

4. 安装bootstrap

gitbash指令：npm install

5. 整合jquery

1. 找到build目录下的webpack.base.conf.js文件

2. 在webpack.base.conf.js文件中填加以下内容

var webpack=require(‘webpack‘)

在module.exports = {.....}中填加以下代码，可以加在末尾

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

到此jquery就可以正常使用了。测试如下：

6. 整合bootstrap

因为我们是先整合的jquery，所以对于整合bootstrap是非常简单的。直接在main.js中引入bootstrap样式文件和js文件即可

到这里 vue + bootstrap + jquery整合就全部完成了。这里需要注意的是vue中引入bootstrap和jquery是没有语法提示的。