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進行注冊
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有一個專門的設計叫做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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue利用computed解決單項數(shù)據(jù)流的問題
Vue是一個非常流行和強大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細節(jié)和技巧,今天我們來分享一個Vue中非常經(jīng)典的問題,也是一個非常實用的技巧,Vue利用computed解決單項數(shù)據(jù)流,需要的朋友可以參考下2023-08-08