1.創(chuàng)建vue項目，輸入以下命令

>>vue init webpack projectName(projectName表示項目名，自己按照實際命名)

2.按照指示完成項目的創(chuàng)建

3.輸入命令

>>cnpm run dev(項目創(chuàng)建成功，在瀏覽器中輸入小黑窗給出的網(wǎng)址即可打開所創(chuàng)建項目的網(wǎng)頁)

4.在小黑窗中輸入命令安裝bootstrap

>>cnpm install bootstrap -S

ps.特別說明

(1)需要安裝依賴

在這里要特別指出的是在vue中bootstrap的使用是依賴于jQuery的，所以在安裝完bootstrap也需要安裝jQuery。

與此同時，第4步中安裝的bootstrap沒有指定安裝的版本，默認(rèn)是安裝了最新版本，即bootstrap4版本，它除了依賴于jQuery之外也依賴于Popper，所以在這里需要安裝兩個依賴，即jQuery與Popper

(2)需要修改代碼文件中的部分代碼

在這里需要說明的是，等到jQuery下載安裝完成后，在main.js文件中引入即可。

5.安裝jQuery

>>cnpm install jquery --save -dev

6.在代碼文件中修改相關(guān)配置

(1)首先在webpack.base.conf.js文件頭中添加如下代碼

(2)再在此文件中找到resolve，在末尾添加jQuery

(3)再在最后添加plugins

(4)在main.js中引入jQuery，因為之前安裝了bootstrap，所以一同引入

7.一般很多人安裝了bootstrap之后會發(fā)現(xiàn)并不能在項目中愉快地使用，再結(jié)合上面的敘述多安裝個jQuery就搞定，但是又會發(fā)現(xiàn)有個問題，如圖，小黑窗會有這樣的錯誤提示，最后一行告知我們需要安裝Popper，OK，試一試安裝Popper吧

8.回看第四點中的說明，我們可以知道我們還欠缺一個Popper依賴，故現(xiàn)在需要做的是“安裝Popper依賴”

9.同樣地，安裝完之后也是需要修改代碼文件中的配置;

如圖所示，在原本引入jQuery新添加的plugin中末尾添加一行Popper

10.到這里，需要安裝的基本搞定，所以來測試一下安裝是否成功，也就是bootstrap是否能夠正常使用

為此，我們可以編寫bootstrap代碼再去瀏覽器中查看是否有我們想要的效果

11.打開瀏覽器，查看效果，如圖所示

看到最后一行的效果就知道安裝成功啦，撒花花，安裝成功，可以愉快地使用啦。如果大家想了解更多相關(guān)知識，不妨來關(guān)注一下本站的Vue.js項目實戰(zhàn)視頻教程，里面還有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助。