這篇文章主要介紹Vue中cli3如何引入bootstrap，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、阿魯科爾沁網(wǎng)站維護(hù)、網(wǎng)站推廣。

在 vue 項(xiàng)目中引入 bootstrap，首先要引入兩個(gè)依賴：jQuery 和 popper

第一步、安裝

1、npm安裝

安裝命令如下：

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev

默認(rèn)安裝最新版本，如果想要安裝 bootstrap 的 V3 版本（依賴 less），可以：

cnpm install bootstrap@3 --save-dev

或者，采用可視化窗口安裝

2、可視化窗口安裝

1、找到：項(xiàng)目> 依賴> +安裝依賴> 運(yùn)行依賴
搜索并安裝 jquery 和 popper.js

2、找到：項(xiàng)目> 依賴> +安裝依賴> 開發(fā)依賴
搜索并安裝 bootstrap

第二步、引入

在 mian.js 頁(yè)面，寫以下代碼

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

// 引入bootstrap樣式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 全局注冊(cè) $
Vue.prototype.$ = $

第三步、配置 jQuery

在 vue.config.js 中，寫如下代碼（如果沒有 vue.config.js ，則在 package.json 同級(jí)目錄下手動(dòng)新建）

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

然后，就可以使用了

測(cè)試bootstrap

以上是“Vue中cli3如何引入bootstrap”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！