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