vue-cli如何引入bootstrap工具的方法
更新時(shí)間：2017年10月19日 10:01:41 作者：子墨言涼
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了vue-cli如何引入bootstrap工具的方法，分享給大家，也給自己留個(gè)筆記。
以下操作以正常安裝node環(huán)境為前提。
1.引入jq：
在npm控制臺(tái)中，進(jìn)入項(xiàng)目目錄，然后輸入指令npm install jquery --save-dev（npm換成cnpm更好，國(guó)內(nèi)環(huán)境下使用cnpm下載速度更快）。
2.修改build目錄下的webpack.base.conf.js配置文件：
1）加入webpack對(duì)象：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各種文件：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue繪制雙Y軸折線柱狀圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue中子組件向父組件傳值$emit、.sync的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
Vue子組件調(diào)用父組件事件的3種方法實(shí)例
大家在做vue開發(fā)過(guò)程中經(jīng)常遇到父組件需要調(diào)用子組件方法或者子組件需要調(diào)用父組件的方法的情況,這篇文章主要給大家介紹了關(guān)于Vue子組件調(diào)用父組件事件的3種方法,需要的朋友可以參考下2024-01-01
解決elementui上傳組件el-upload無(wú)法第二次上傳問題
這篇文章主要介紹了解決elementui上傳組件el-upload無(wú)法第二次上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue中直接操作數(shù)組索引不奏效的問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航收縮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
很多朋友不明白在使用vue for時(shí)為什么要key，key的作用有哪些,在文中給大家詳細(xì)介紹，需要的朋友可以參考下2019-07-07
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05