vue項目(cli3) -- 引入 bootstrap


在 vue 項目中引入 bootstrap,需要先引入兩個依賴:jQuery 和 popper

 1、在終端中進行安裝:

    npm install bootstrap --save-dev   默認安裝最新版本  如果想安裝3版本  npm install bootstrap@3 --save-dev

    npm install jquery --save-dev

    npm install popper.js --save-dev

  2、在main.js中引入:   

// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'

// 引入bootstrap樣式
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' // 全局注冊 $ Vue.prototype.$ = $

3、 配置JQuery

在 vue.config.js 中,寫如下代碼(如果沒有 vue.config.js ,則在 package.json 同級目錄下手動新建):

const webpack = require("webpack")
module.exports = { // 配置插件參數  configureWebpack: { plugins: [ // 配置 jQuery 插件的參數 new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }

搞定!!!

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM