vue + jQuery + bootstrap integration

Front-end integrated technology stack

1. vue-cli installation

　　gitbash command: npm install -g @ vue / cli @ version number

　　Note: npm view vue-cli versions --json view available vue version

2. Create a project using the vue-cli

　　gitbash instructions: vue init webpack project name

3. Install jQuery

　　gitbash instructions: npm install [email protected] --save

4. Installation bootstrap

　　gitbash指令：npm install bootstrap@3

5. Integrated jquery

　　1. Locate the file in the build directory webpack.base.conf.js

　　

　　2. webpack.base.conf.js file filling the following

　　

　　

var webpack=require('webpack')

　　In module.exports = {.....} filling in the following code can be added at the end

　　

　　

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是没有语法提示的。