一、安裝jquery

由於bootstrap中js外掛依賴於jquery，所以在這之前必須安裝jquery。

1、在package.json中新增一行程式碼：“jquery”: “^2.2.3”

2、在build檔案webpack.base.conf.js中新增程式碼：

頭部插入程式碼：

const webpack = require("webpack")

中間插入程式碼：

1 plugins: [
2     new webpack.ProvidePlugin({
3       $: "jquery",
4       jQuery: "jquery",
5       "windows.jQuery": "jquery",
 
6       Popper: ['popper.js', 'default'],  //這一句是安裝 bootstrap 和 bootstrap 的 popper.js 之後再新增進來
7     })
8   ],

效果展示：

3、在main.js中加入：import $ from 'jquery'

4、使用cmd進入對應儲存路徑安裝jquery

我希望將hjquery檔案安裝在D:\Program Files路徑下，因此我進入該路徑下，執行npm install [email protected] –save-dev。這時候jquery安裝完成。

5、jquery安裝完成後，開啟安裝路徑D:\Program Files，看到生成了3個檔案。開啟node_modules包含兩個檔案jquery和.package-lock.json。

二、安裝BootStrap

1、cmd啟動執行npm install [email protected] –save-dev，安裝BootStrap

2、在main.js頁面引入

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

3、安裝完成後，可以看到D:\Program Files\node_modules資料夾中生成了bootstrap資料夾。

三、啟動專案

開啟cmd，執行npm run dev啟動專案