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

成都創新互聯，為您提供成都網站建設、成都網站制作、網站營銷推廣、網站開發設計，對服務混凝土攪拌機等多個行業擁有豐富的網站建設及推廣經驗。成都創新互聯網站建設公司成立于2013年,提供專業網站制作報價服務,我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發展進步，是我們永遠的責任！

在 vue 項目中引入 bootstrap，首先要引入兩個依賴：jQuery 和 popper

第一步、安裝

1、npm安裝

安裝命令如下：

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

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

2、可視化窗口安裝

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.$ = $

第三步、配置 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']
            })
        ]
    }
}

然后，就可以使用了

測試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”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

當前文章：Vue中cli3如何引入bootstrap-創新互聯
當前地址：http://newbst.com/article16/dggegg.html

成都網站建設公司_創新互聯，為您提供網站建設、定制開發、動態網站、手機網站建設、關鍵詞優化、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯