vue-cli引入bootstrap工具的方法

本文主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

以下操作以正常安裝node環境為前提。

1.引入jq：

在npm控制台中，進入專案目錄，然後輸入指令npm install jquery --save-dev（npm換成cnpm更好，國內環境下使用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各種檔案：

#       

相關推薦：

基於Bootstrap裡面的Button dropdown打造自訂select

#bootstrap響應式工具使用方法分享

Bootstrap Table 搜尋框與查詢功能詳解

以上是vue-cli引入bootstrap工具的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！