Bootstrap-Vue怎么樣

這篇文章主要為大家展示了“Bootstrap-Vue怎么樣”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Bootstrap-Vue怎么樣”這篇文章吧。

　　vue-strap基于vue.js構建的Bootstrap組件，該倉庫包含一系列基于Bootstrap標記和css的本地vue.js組件。所以不需要jQuery和Bootstrap的JavaScript文件，唯一需要依賴的是:vue.js(要求版本為^0.12，基于0.12.10版本做的測試)Bootstrapcss(需要版本為3.x.x，基于3.3.5版本做的測試)。vueStrap不依賴某個非常精確的Bootstrap版本。

　　Bootstrap-Vue怎么樣

　　使用Vue.js和世界上最流行的前端CSS庫—BootstrapV4在Web上構建響應式，移動優先項目。

　　Bootstrap-Vue為Vue.js2.4+提供了BootstrapV4組件和最全面的網格系統的實現，它具有廣泛的自動化WAI-ARIA輔助功能標記。

　　vue引用BootStrap以及引用bootStrap-vue.js

　　1.先引入jquery

　　1.先使用指令:

　　npminstalljquery--save-dev

　　2.在webpack.base.conf.js（如果是是開發[dev]環境則在webpack.dev.conf.js；兩個文件都在bulid目錄下；請一定注意，我在操作的時候就是找錯了文件，半天都沒有弄對；）中添加如下內容：

　　constwebpack=require('webpack')

　　plugins:[

　　newwebpack.ProvidePlugin({

　　$:"jquery",

　　jQuery:"jquery"

　　}),

　　]

　　3.在main.js進行注冊

　　import$from‘jquery’

　　到此jquery就引入結束了，接著看如何引入傳統的bootStrap

　　2.引入BootStrap

　　1.使用指令:

　　npminstallbootstrap--save-dev

　　2.安裝成功后，能夠在package.json文件夾中看到bootstrap這個模塊。這時候需要在main.js中添加如下內容:

　　import'bootstrap/dist/css/bootstrap.min.css'

　　import'bootstrap/dist/js/bootstrap.min'

　　至此bootStrap也引入結束，接下來我們的重點來了，因為BootStrap與VUE有一個專門的設計叫做bootstrap-vue.js，所以我們引入它之后就可以直接使用它們提供的專有樣式，比原生的bootStrap要好看很多

　　1.使用指令:

　　npmivuebootstrap-vuebootstrap

　　2.在main.js文件中添加:

　　importVuefrom'vue'

　　importBootstrapVuefrom'bootstrap-vue'

　　import'bootstrap/dist/css/bootstrap.css'

　　import'bootstrap-vue/dist/bootstrap-vue.css'

　　Vue.use(BootstrapVue)

　　至此所有的引用均都結束了

以上是“Bootstrap-Vue怎么樣”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！