vue引用BootStrap以及引用bootStrap-vue.js問(wèn)題
先引入jquery
1.先使用指令：
npm install jquery --save-dev
2.在webpack.base.conf.js（如果是是開(kāi)發(fā)[dev]環(huán)境則在webpack.dev.conf.js；
兩個(gè)文件都在bulid目錄下；
請(qǐng)一定注意，我在操作的時(shí)候就是找錯(cuò)了文件，半天都沒(méi)有弄對(duì)；）中添加如下內(nèi)容：
const webpack = require('webpack')
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
3.在main.js進(jìn)行注冊(cè)
import $ from ‘jquery'
到此jquery就引入結(jié)束了，接著看如何引入傳統(tǒng)的bootStrap
引入BootStrap
1.使用指令：
npm install bootstrap --save-dev
2.安裝成功后，能夠在package.json文件夾中看到bootstrap這個(gè)模塊。
這時(shí)候需要在main.js中添加如下內(nèi)容：
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
至此bootStrap也引入結(jié)束，接下來(lái)我們的重點(diǎn)來(lái)了，因?yàn)锽ootStrap與VUE有一個(gè)專(zhuān)門(mén)的設(shè)計(jì)叫做bootstrap-vue.js，所以我們引入它之后就可以直接使用它們提供的專(zhuān)有樣式，比原生的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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個(gè)或多個(gè)值問(wèn)題
這篇文章主要介紹了el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個(gè)或多個(gè)值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹在Vue中是如何封裝axios的相關(guān)資料，axios的封裝主要是幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，感興趣的小伙伴可以和小編一起來(lái)閱讀下面文章的具體內(nèi)容2021-10-10
詳解Vue如何進(jìn)行表單聯(lián)動(dòng)與級(jí)聯(lián)選擇
表單聯(lián)動(dòng)和級(jí)聯(lián)選擇是Vue.js中常見(jiàn)的功能，在下面的文章中，我們將討論如何在Vue.js中實(shí)現(xiàn)表單聯(lián)動(dòng)和級(jí)聯(lián)選擇，感興趣的小伙伴可以了解一下2023-06-06
解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒(méi)值報(bào)錯(cuò)問(wèn)題
今天小編大家分享一篇解決vuex數(shù)據(jù)異步造成初始化的時(shí)候沒(méi)值報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問(wèn)題及解決
這篇文章主要介紹了react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫(kù)、自定義組件以及通過(guò)插件簡(jiǎn)化項(xiàng)目構(gòu)建過(guò)程,這篇文章給大家介紹了Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過(guò)程,需要的朋友可以參考下2024-07-07
解決el-menu標(biāo)題過(guò)長(zhǎng)顯示不全問(wèn)題
本文主要介紹了如何解決el-menu標(biāo)題過(guò)長(zhǎng)顯示不全問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的朋友們跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書(shū)管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
詳解Vite+JavaScript+Vue+Yarn實(shí)現(xiàn)登錄頁(yè)面實(shí)戰(zhàn)
本文主要介紹了Vite+JavaScript+Vue+Yarn實(shí)現(xiàn)登錄頁(yè)面實(shí)戰(zhàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
在Vue應(yīng)用中,將頁(yè)面導(dǎo)出為PDF文件通常涉及到前端技術(shù)的組合,下面這篇文章主要給大家介紹了關(guān)于vue2前端導(dǎo)出pdf文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09