1. vue+jQuery+bootstrap整合

前端技術棧整合

1.  vue-cli的安裝

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

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

2. 利用vue-cli創建項目

　　gitbash指令：vue init webpack 項目名

3. 安裝jQuery

　　gitbash指令：npm install [email protected]  --save

4. 安裝bootstrap

　　gitbash指令：npm install bootstrap@3

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是沒有語法提示的。