Vue cli 安裝 Bootstrap4、Sass、jQuery 和 Popper.js

紀錄一下環境建置

首先建立vue cli專案

vue init webpack 專案名稱

或

vue init webpack-sample 專案名稱

接著

cd 專案名稱

npm 安裝套件

npm安裝Bootstrap 4

npm install bootstrap -S

現在install bootstrap會自動選bootstrap4

npm安裝jQuery

npm install jquery -S

npm安裝popper.js

npm install popper.js -S

npm安裝sass、sass-loader、node-sass

npm install sass sass-loader node-sass -S

-S等於—save，是要把相依寫入進package.json
安裝jquery與popper.js是因為BS4還是有功能用到這兩個函式庫

接著執行

npm run dev

在本地端起server，在port8080開發網頁

但是只有在終端機install bootstrap、jquery、popper.js還無法直接使用......

設置jQuery與popper.js

編輯器或IDE打開專案，到build/webpack.base.conf.js去修改設定

webpack.base.conf.js

為了使用jq和bs4，webpack.base.conf.js最上方加入這段(和其他const xxx = require('xxx’)放一起)

const webpack = require('webpack')

記得註解說這是為了使用jq和bs4，這樣之後要修改才知道

接著在webpack.base.conf.js內去找module.exports這段
這段可能會長這樣

module.exports = {
  entry: {//..裡面一堆東西},
  output: {//..裡面一堆東西},
  resolve: {//..裡面一堆東西},
  module: {//..裡面一堆東西},
  node:{//..裡面一堆東西},
}

在module.exports內新增設置一個和entry、output、resolve...etc 同層級屬性的plugins：{}
內容如下：

module.exports = {
  entry: {//..裡面一堆東西},
  output: {//..裡面一堆東西},
  resolve: {//..裡面一堆東西},
  module: {//..裡面一堆東西},
  node:{//..裡面一堆東西},
  plugins: [new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    Popper: 'popper.js',
    popper: 'popper.js'
})],
}

記得區隔屬性的逗號要加
這麼一來就等於把popper和JQ成功設置進vue cli

接著到src/main.js內的檔案
開頭加入

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

這麼一來就裝好囉，到app.vue去引入隨便一個BS4元件，看看有沒有成功顯示！

Vue cli 安裝 Bootstrap4、Sass、jQuery 和 Popper.js

Written by:

SimonAllen