快速搭建vue2.0+boostrap項(xiàng)目的方法

更新時(shí)間：2018年04月09日 10:30:09 作者：魔法博士

這篇文章主要介紹了快速搭建vue2.0+boostrap項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、Vue CLI初始化Vue項(xiàng)目

全局安裝vue cli

npm install --global vue-cli創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目

vue init webpack my-project進(jìn)入項(xiàng)目目錄試運(yùn)行

npm run dev

二、將BootStrap加入到Vue項(xiàng)目中

安裝JQuery(因?yàn)锽oostrap是依賴于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'

檢驗(yàn)

在任何模板中添加如下代碼：

<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">
          <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4>
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</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樣式庫(kù)添加成功

點(diǎn)擊按鈕出現(xiàn)：

按鈕能夠正確的響應(yīng)彈出模式對(duì)話框，證明JQuery庫(kù)和Bootstrap的js庫(kù)添加成功。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)

相關(guān)文章

深入了解Vue.js中的Vuex狀態(tài)管理模式
Vuex是Vue.js的官方狀態(tài)管理模式，它為Vue.js應(yīng)用程序提供了一個(gè)集中式的狀態(tài)管理解決方案，Vuex可以幫助我們管理應(yīng)用程序中所有組件的狀態(tài)，使得狀態(tài)管理變得更加簡(jiǎn)單和可靠，需要詳細(xì)了解可以參考下文
2023-05-05
Vue中子組件向父組件傳值以及.sync修飾符詳析
.sync?修飾符所提供的功能,當(dāng)一個(gè)子組件改變了一個(gè)prop的值時(shí),這個(gè)變化也會(huì)同步到父組件中所綁定,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件向父組件傳值以及.sync修飾符的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能
這篇文章主要介紹了vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能，本文圖文并茂，代碼實(shí)例相結(jié)合介紹的非常詳細(xì)，需要的朋友參考下吧
2019-07-07
VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實(shí)例)
最近了解到mqtt這樣一個(gè)協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景
這篇文章主要介紹了Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
Vue使用wavesurfer.js實(shí)現(xiàn)音頻可視化的示例詳解
WaveSurfer.js是一個(gè)開源的音頻可視化庫(kù),用于創(chuàng)建交互式、可定制的波形,本文將為大家簡(jiǎn)單介紹了Vue如何使用wavesurfer.js實(shí)現(xiàn)音頻可視化功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04
axios 封裝上傳文件的請(qǐng)求方法
今天小編就為大家分享一篇axios 封裝上傳文件的請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
使用vite兼容低端瀏覽器配置
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue3常用的指令之v-bind和v-on指令用法
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
vue如何解決el-select下拉框顯示ID不顯示label問題
這篇文章主要介紹了vue如何解決el-select下拉框顯示ID不顯示label問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06