vue-cli如何引入bootstrap工具的方法
本文介紹了vue-cli如何引入bootstrap工具的方法,分享給大家,也給自己留個筆記。
以下操作以正常安裝node環(huán)境為前提。
1.引入jq:
在npm控制臺中,進(jìn)入項目目錄,然后輸入指令npm install jquery --save-dev(npm換成cnpm更好,國內(nèi)環(huán)境下使用cnpm下載速度更快)。
2.修改build目錄下的webpack.base.conf.js配置文件:
1)加入webpack對象:var webpack=require('webpack');
2)在module.exports里面加入以下配置:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
3)在入口文件main.js中加入:import jquery from 'jquery'
3.引入bootstrap:
1)修改webpack.base.conf.js文件:
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
2)在入口文件main.js中加入:
import './assets/css/bootstrap.min.css' import './assets/js/bootstrap.min'
3)在assets文件目錄中拷貝bootstrap各種文件:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue子組件調(diào)用父組件事件的3種方法實(shí)例
大家在做vue開發(fā)過程中經(jīng)常遇到父組件需要調(diào)用子組件方法或者子組件需要調(diào)用父組件的方法的情況,這篇文章主要給大家介紹了關(guān)于Vue子組件調(diào)用父組件事件的3種方法,需要的朋友可以參考下2024-01-01
解決elementui上傳組件el-upload無法第二次上傳問題
這篇文章主要介紹了解決elementui上傳組件el-upload無法第二次上傳問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05

