快速搭建vue2.0+boostrap項目

一、Vue CLI初始化Vue項目

• 全局安裝vue cli
  npm install --global vue-cli
• 創建一個基於 webpack 模板的新項目
  vue init webpack my-project
• 進入項目目錄試運行
  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">點擊我</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">
                    <h4 class="modal-title">模態彈出窗標題</h4>
                    <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>模態彈出窗主體內容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

運行npm run dev，頁面出現：

按鈕呈現bootstrap的按鈕樣式，證明Bootstrap樣式庫添加成功
點擊按鈕出現：

按鈕能夠正確的響應彈出模式對話框，證明JQuery庫和Bootstrap的js庫添加成功。

原文地址：https://segmentfault.com/a/1190000014246633