快捷導(dǎo)航

vue引用BootStrap以及引用bootStrap-vue.js問題

更新時間：2023年10月26日 10:39:14 作者：ZNineSun

這篇文章主要介紹了vue引用BootStrap以及引用bootStrap-vue.js問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

先引入jquery

1.先使用指令：

npm install jquery --save-dev

2.在webpack.base.conf.js（如果是是開發(fā)[dev]環(huán)境則在webpack.dev.conf.js；

兩個文件都在bulid目錄下；

請一定注意，我在操作的時候就是找錯了文件，半天都沒有弄對；）中添加如下內(nèi)容：

 const webpack = require('webpack')
  plugins:[
new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
]

3.在main.js進(jìn)行注冊

import $ from ‘jquery'

到此jquery就引入結(jié)束了，接著看如何引入傳統(tǒng)的bootStrap

引入BootStrap

1.使用指令：

npm install bootstrap --save-dev

2.安裝成功后，能夠在package.json文件夾中看到bootstrap這個模塊。

這時候需要在main.js中添加如下內(nèi)容：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

至此bootStrap也引入結(jié)束，接下來我們的重點(diǎn)來了，因?yàn)锽ootStrap與VUE有一個專門的設(shè)計叫做bootstrap-vue.js，所以我們引入它之后就可以直接使用它們提供的專有樣式，比原生的bootStrap要好看很多

1.使用指令：

npm i vue bootstrap-vue bootstrap

2.在main.js文件中添加：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

至此所有的引用均都結(jié)束了

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue如何在項(xiàng)目中調(diào)用騰訊云的滑動驗(yàn)證碼
這篇文章主要介紹了vue如何在項(xiàng)目中調(diào)用騰訊云的滑動驗(yàn)證碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
詳解vue-cli官方腳手架配置
這篇文章主要介紹了詳解vue-cli官方腳手架配置,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
關(guān)于Vue的?Vuex的4個輔助函數(shù)
這篇文章主要介紹了關(guān)于Vue的?Vuex的4個輔助函數(shù),輔助函數(shù)的好處就是幫助我們簡化了獲取store中state、getter、mutation和action,下面我們一起來看看文章具體的舉例說明吧，需要的小伙伴也可以參考一下
2021-12-12
vue簡單的store詳解
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-10-10
在Vue中使用icon 字體圖標(biāo)的方法
這篇文章主要介紹了在Vue中使用icon 字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
vue中解決el-date-picker更改樣式不生效問題
在使用Vue.js進(jìn)行前端開發(fā)的過程中,Element?UI?是一個非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個問題使用Element?UI提供的el-date-picker組件時,嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個問題
2024-10-10
vue-以文件流-blob-的形式-下載-導(dǎo)出文件操作
這篇文章主要介紹了vue-以文件流-blob-的形式-下載-導(dǎo)出文件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue-router的鉤子函數(shù)用法實(shí)例分析
這篇文章主要介紹了vue-router的鉤子函數(shù)用法,結(jié)合實(shí)例形式分析了vue路由鉤子分類及vue-router鉤子函數(shù)相關(guān)使用技巧,需要的朋友可以參考下
2019-10-10
Vue3 Suspense處理異步組件加載的工作原理
Vue3在新版本中提供了一個新的API，稱為Suspense，它可以使異步組件的加載更加高效和流暢，在本文中，我們將詳細(xì)了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來提高 Web 應(yīng)用程序的性能
2023-06-06
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問題
Vue是一個非常流行和強(qiáng)大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個Vue中非常經(jīng)典的問題,也是一個非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下
2023-08-08