vue-cli如何引入bootstrap工具的方法
更新時間：2017年10月19日 10:01:41 作者：子墨言涼
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了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自定義keepalive組件的相關(guān)資料,keep-alive組件是使用?include?exclude這兩個屬性傳入組件名稱來確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-07-07
這篇文章主要介紹了Vue異步組件處理路由組件加載狀態(tài)的解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了vue的路由映射問題及解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解
這篇文章主要介紹了vue 百度地圖(vue-baidu-map)繪制方向箭頭折線,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Antd的Table組件嵌套Table以及選擇框聯(lián)動操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中使用file-saver導(dǎo)出文件的全過程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
vue中使用window.open()參數(shù)示例詳解
這篇文章主要介紹了vue中使用window.open()參數(shù)詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue+ElementUI技巧之自定義表單項label的文字提示方法
這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項label文字提示的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02