您好,登錄后才能下訂單哦!
小編給大家分享一下怎么搭建vue2.0+boostrap項目,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
一、Vue CLI初始化Vue項目
全局安裝vue cli
npm install --global vue-cli創(chuàng)建一個基于 webpack 模板的新項目
vue init webpack my-project進(jìn)入項目目錄試運(yùn)行
npm run dev
二、將BootStrap加入到Vue項目中
安裝JQuery(因為Boostrap是依賴于JQuery的)
npm install jquery --save-dev
安裝Boostrap
npm install bootstrap --save-dev
在main.js中分別添加jquery,bootstrap.css, bootstrap.js
import 'jquery/dist/jquery.min' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
檢驗
在任何模板中添加如下代碼:
<div> <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">點(diǎn)擊我</button> <div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">模態(tài)彈出窗標(biāo)題</h5> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> </div> <div class="modal-body"> <p>模態(tài)彈出窗主體內(nèi)容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> </div>
運(yùn)行npm run dev,頁面出現(xiàn):
按鈕呈現(xiàn)bootstrap的按鈕樣式,證明Bootstrap樣式庫添加成功
點(diǎn)擊按鈕出現(xiàn):
按鈕能夠正確的響應(yīng)彈出模式對話框,證明JQuery庫和Bootstrap的js庫添加成功。
看完了這篇文章,相信你對“怎么搭建vue2.0+boostrap項目”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。