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é)束,接下來我們的重點來了,因為BootStrap與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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-以文件流-blob-的形式-下載-導(dǎo)出文件操作
這篇文章主要介紹了vue-以文件流-blob-的形式-下載-導(dǎo)出文件操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue利用computed解決單項數(shù)據(jù)流的問題
Vue是一個非常流行和強(qiáng)大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個Vue中非常經(jīng)典的問題,也是一個非常實用的技巧,Vue利用computed解決單項數(shù)據(jù)流,需要的朋友可以參考下2023-08-08