載入第三方套件

個人習慣用npm來安裝套件，完成後僅代表套件下載在 node_modules/ 裡而已，還要透過import的方式才能開始使用；假如只有特定組件會需要使用該第三方套件，那麼只需要在該元件裡import套件就好，其餘則是全域安裝會比較方便。

Bootstrap

接著我們要載入 bootstrap 來加快開發速度，此處安裝的是最新的 4.0.0-beta.3 版本，但因為 bootstrap 某些組件會用到 jQuery 和 proper.js，所以如果只先安裝 bootstrap 的話，再執行時會出現錯誤提示，所以開始之前可以先安裝 jQuery 及 proper.js，再安裝 bootstrap。

npm install --save jquery popper.js
npm install --save [email protected]

接著我們要全域載入 bootstrap，到 src/main.js 中置入

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'

接著執行npm run dev，試著套用 bootstrap 語法，沒報錯的話就代表已成功安裝了。

jQuery

如果使用的 bootstrap 元件需要 jQuery，編輯時就會出現ReferenceError: $ is not defined這樣的錯誤訊息，那是因為我們尚未定義 $，才會出現這樣的訊息。

編輯 build/webpack.base.conf.js 檔案，在 module.exports 中加入 ProvidePlugin 的函式。

//webpack.base.conf.js

// 引入 webpack
const webpack = require('webpack')

module.exports = {
  ...
  node: {
    ...
  },
  // 新增 plugins
  plugins: [
    new webpack.ProvidePlugin({
       $: "jquery"
    })
  ]
}

添加完後重新執行npm run dev會發現還是存在這個錯誤，這是因為 eslint 檢查語法的關係，關閉的方法為編輯 eslintrc.js 檔案，在 env 裡添加jquery: true，如下

//eslintrc.js

env: {
    browser: true,
    jquery: true
  },

添加完成後再執行一次npm run dev，應該就不會有錯誤訊息囉～