vue-cli如何引入bootstrap工具的方法

這篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現在分享js給大家，也給大家做個參考。對js有興趣的一起跟隨小編過來看看吧

本文介紹了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各種檔案：

       

以上就是本文的內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

相關推薦：

JS函數節流防手震實例詳解

Js中的模組化是如何實現的

JS簡單實作滑動載入資料實例分享#

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