vuejs 使用vue-cli引入bootstrap

　　前言：對於剛剛進入vuejs的隊伍中的小白來說，不少都是模糊的，js操做dom節點的思想縈繞，還不能自由切換在兩者之間。

　　解決之道：

 

想要在vue中引入bootstrap，引入的時候須要按照以下的步驟進行。

 

一、引入jquery 二、引入bootstrap

閱讀本文前，應該可以搭建環境，使用vue-cli進行項目的建立，能夠參考文章： http://blog.csdn.net/wild46cat/article/details/76360229

 

：

 一、經過npm view 模塊名 versions來查看模塊目前的版本，安裝也能夠選擇版本安裝。例如：cnpm install jquery@11.7 --save-dev

 二、 安裝參數 --save 與 --save-dev 區別在於--save-dev安裝於開發環境中（更多百度「npm」）　

 三、使用命令npm install jquery --save-dev（或者 cnpm install jquery --save-dev） 引入jquery。

 

 四、在webpack.base.conf.js（若是是是開發[dev]環境則在webpack.dev.conf.js；兩個文件都在bulid目錄下；請必定注意，我在操做的時候就是找錯了文件，半天都沒有弄對；）中添加以下內容：

 

var webpack = require('webpack')


//和

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
],

 

 

 五、在main.js中添加內容

 

import $ from 'jquery'

六、安裝bootstrap，使用命令cnpm install bootstrap --save-dev

七、安裝成功後，可以在package.json文件夾中看到bootstrap這個模塊。這時候須要在main.js中添加以下內容:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

八、添加完成後，從新啓動程序，cnpm run dev(重啓的過程當中可能會出現以下圖的錯誤：跟着錯誤提示，你須要安裝 axios popper.js）

九、測試jquery、與boostrap安裝是否成功

 

 　  後記：

　　　　　　結合着官方文檔，進入了條件渲染，偶然發現樣式太醜，因而就想着如何把bootstrap引入進來，看着好看些，因而百度了，找到了文章，可也仍是遇到了一些問題，感受這些問題比較容易出現，因此就記錄一筆隨筆。

　　　　　　若是是php程序員，你會發現node項目開發和phpcomposer開發是幾乎同樣的，聽說是php學習的npm^_^