vue 引入bootstrap

想要在vue中引入bootstrap,引入的時候需要按照如下的步驟進行。

1、引入jquery 2、引入bootstrap
閱讀本文前,應(yīng)該能夠搭建環(huán)境,使用vue-cli進行項目的創(chuàng)建,可以參考文章:http://blog.csdn.net/wild46cat/article/details/76360229

1、通過npm view 模塊名 versions來查看模塊目前的版本,安裝也可以選擇版本安裝。例如:cnpm install jquery@11.7 --save-dev

2、 安裝參數(shù) --save 與 --save-dev 區(qū)別在于--save-dev安裝于開發(fā)環(huán)境中(更多百度“npm”)

3、使用命令npm install jquery --save-dev(或者 cnpm install jquery --save-dev) 引入jquery。

4、在webpack.base.conf.js(如果是是開發(fā)[dev]環(huán)境則在webpack.dev.conf.js;兩個文件都在bulid目錄下;請一定注意,我在操作的時候就是找錯了文件,半天都沒有弄對;)中添加如下內(nèi)容:

var webpack = require(‘webpack‘)

//和

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

5、在main.js中添加內(nèi)容

import $ from ‘jquery‘

6、安裝bootstrap,使用命令cnpm install bootstrap --save-dev

7、安裝成功后,能夠在package.json文件夾中看到bootstrap這個模塊。這時候需要在main.js中添加如下內(nèi)容:

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

8、添加完成后,重新啟動程序,cnpm run dev(重啟的過程中可能會出現(xiàn)如下圖的錯誤:跟著錯誤提示,你需要安裝 axios popper.js)

image

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

image

后記:

結(jié)合著官方文檔,進入了條件渲染,偶然發(fā)現(xiàn)樣式太丑,于是就想著如何把bootstrap引入進來,看著好看些,于是百度了,找到了文章,可也還是遇到了一些問題,感覺這些問題比較容易出現(xiàn),所以就記錄一筆隨筆。

如果是php程序員,你會發(fā)現(xiàn)node項目開發(fā)和phpcomposer開發(fā)是幾乎一樣的,據(jù)說是php學(xué)習(xí)的npm_

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • step1 初始化項目 使用vue-cli腳手架,初始化一個vue項目,如果不清楚怎么初始化的,可以參我的文章Vu...
    秋楪祈閱讀 61,338評論 3 20
  • 建立Vue框架后 cnpm install jquery --save-dev cnpm install styl...
    chiachan163閱讀 612評論 0 0
  • 前言:對于剛剛進入vuejs的隊伍中的小白來講,很多都是模糊的,js操作dom節(jié)點的思想縈繞,還不能自由切換在二者...
    qishuangyan閱讀 8,182評論 0 3
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,451評論 0 21
  • 游粵西信城北邏荷花池塘 七律-游荷塘 luohong蒼狼 西行北邏入荷塘,遠隔喧囂綠道長。 不染污泥身玉潔,撐陽傘...
    蒼狼詩詞閱讀 434評論 1 2

友情鏈接更多精彩內(nèi)容