vue專案中引入bootstrap的方法

vue專案中引入bootstrap？下面這篇文章跟大家介紹一下。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關教學推薦：《bootstrap教程》

在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>
<p class="container">
  <p class="row">
    <p class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </p>
  </p>
</p>
</template>

更多程式相關知識，請造訪：程式設計教學！ ！

以上是vue專案中引入bootstrap的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！