vue項目中經(jīng)常會用到一些依賴包，這里以jQuery和bootstrap為例

npm安裝jQuery

1. cmd進入softcup文件夾，輸入cnpm i jquery -S -D開始安裝

2. 安裝完成后，在項目根目錄下的build目錄下找到webpack.base.conf.js文件，在開頭使用以下代碼引入webpackvar webpack = require('webpack')，因為該文件默認(rèn)沒有引用
   

   image

3. 然后在module.exports中添加一段代碼

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
 ]

image

4. 然后在main.js里導(dǎo)入import 'jquery'就可以了
   

   image

5. 運行npm run start
   如果編譯出錯，檢查一下eslint，修改根目錄下.eslintrc.js文件了，為env添加一個鍵值對 jquery: true 就可以了

image

6. 可以在App.vue文件中添加測試代碼
   $(function () {alert (123);});
   

   測試

7. 運行npm run start

8. 打開瀏覽器，輸入localhost:8080回車 ，彈出alert就成功了

npm安裝Bootstrap

1. 安裝bootstrap前，必須先安裝jQuery

2. cmd進入softcup文件夾，輸入cnpm i bootstrap -S -D開始安裝

3. 完成后，在入口文件main.js里引入

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

4. 添加一段Bootstrap代碼測試，運行npm run start

5. 這時可能會報錯 ，因為bootstrap4不僅依賴jquery還有popper.js，所以安裝popper.js

此時安裝的是bootstrap4，因為版本不同，依賴有所變化，如果要改變版本，下面另說

6. cmd進入softcup文件夾，輸入cnpm i popper.js -S -D開始安裝
   同時在webpack.base.conf.js文件中加入Popper: ['popper.js', 'default']
   

   image

7. 可以在App.vue文件的template中添加測試代碼

<divclass="btn-group">
  <buttontype="button"class="btn btn-primary">Apple</button>
  <buttontype="button"class="btn btn-primary">Samsung</button>
  <buttontype="button"class="btn btn-primary">Sony</button>
</div>

8. 運行npm run start，出現(xiàn)樣式，就成功了

關(guān)于版本更換

1. 如果要改變用npm下載的文件版本，要在根目錄下的package.json文件下修改

2. 這里以bootstrap為例

   1. 在package.json文件下，Ctrl+F查找bootstrap

      
      
      image

   2. 修改版本號即可

   3. 再進入cmd，輸入cnpm i bootstrap -S -D回車，就下載了相應(yīng)版本的bootstrap了

vue-cli+webpack項目搭建