一、首先確保專案已經使用 vue-cli 腳手架搭建完畢

如果不會搭建，請移步：從零搭建一個vue-cli專案

二、安裝jquery

我們都知道 bootstarp 是依賴於 jquery 的，所有要想使用 bootstarp 我們就要先安裝 jquery

在命令列開啟專案根目錄，輸入：

npm install jquery --save-dev

安裝完成以後修改 build 檔案下的 webpack.base.conf.js 檔案

在 module.exports 中加入下面程式碼：

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

修改 module.exports 中 resolve 下的 alias：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }

改為：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': "jquery/src/jquery"
    }
 

然後在 main.js 中引入 jquery

import $ from 'jquery'

到此，jquey就安裝完成了！！！

三、引入 bootstarp

先從官網下載 bootstarp 生產環境包：Bootstarp中文網

然後把下載的 bootstarp 的 css、font、js 匯入到專案 src/assets 目錄下

注意：不匯入 fonts 目錄可能為報錯，別問我怎麼知道的！！

在 main.js 中直接引入 bootstarp：

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

OK，到此你的專案就能夠使用 jquery 和 bootstarp 了，趕快去動手開發吧！