相關推薦:《》、《》
在 vue 專案中引入 bootstrap,首先要引入兩個依賴:jQuery 和 popper
安裝命令如下:
cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev
預設安裝最新版本,如果想要安裝 bootstrap 的 V3 版本(依賴 less),可以:
cnpm install bootstrap@3 --save-dev
或者,採用視覺化視窗安裝
1、找到:專案> 依賴> +安裝依賴> 執行依賴
搜尋並安裝 jquery 和 popper.js
2、找到:專案> 依賴> +安裝依賴> 開發依賴
搜尋並安裝 bootstrap
在 mian.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.$ = $
在 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'] }) ] } }
然後,就可以使用了
測試bootstrap
<template> <div class="container"> <div class="row"> <div class="col-md-6"> <button class="btn btn-primary">測試按鈕</button> </div> </div> </div> </template>
更多程式設計相關知識,請存取:!!
以上就是Vue cli3引入bootstrap的方法介紹的詳細內容,更多請關注TW511.COM其它相關文章!