如何在vuejs中使用bootstrap？

精華

初一扛把子 2016-10-19 10:35:55 瀏覽(8399) 回復(fù)(4) 贊(0)

使用vuejs重構(gòu)代碼，原來的代碼是使用bootstrap+jquery開發(fā)的。不想重復(fù)的去寫樣式，所以想把原來的東西直接拿過來。但是再引入bootstrap的時候遇到了問題。

<script>
import jquery from '../../node_modules/jquery/dist/jquery.min.js'
import bootstrap from 'bootstrap'
export default {

}
</script>

在import進來的時候報錯，
bootstrap

還有css用的less，如何同時引入bootstrap的css文件呢？

標簽： bootstrap

回答(4)

jing_cai 2016-10-19

使用bootstrap 還是使用bootstrap css?

bootstrap分為css和js兩個文件，其中css負責樣式，js給按鈕等組件填上響應(yīng)事件。所以光使用css只有一些基礎(chǔ)樣式。那為什么不加載js呢？直接原因是其依賴于jquery。而在使用了vue作為數(shù)據(jù)綁定的情況下，jquery做的事情，vue都做得了，沒必要引入jquery。引入jquery引起兩套數(shù)據(jù)->UI控制，不太好。

其實less是一門css的預(yù)編譯語言。（此定義未必準確）緣起是這樣的：

一個頁面不宜加載太多的文件。這是因為每一個文件都得讓瀏覽器去做http請求，下載，執(zhí)行。下載1000個1k的文件跟下載1個1000k的文件比起來，通常耗時前者會比后者多1~2個數(shù)量級。
針對編程這件事而言，大規(guī)模項目總有模塊化傾向。這是分治的原因，把大問題化成小問題，方便開發(fā)和重用。
所以我們需要一個工具，可以把大量碎片的css合成成一個css。同時，css在設(shè)計之初是面向ui的，編程能力太弱了，需要一個更強有力的語言。
less是bootstrap3所采用的預(yù)編譯器，此外還有bootstrap4采用的sass，和一個叫stylus的編譯器（和語言）。less、sass、stylus都差不了太多。自行了解吧。
對于一個使用了webpack + vue的項目來說，如果不需要對bootstrap的總體樣式進行調(diào)整，直接采用一個外鏈css就可以了，簡單方便，本地node_modules中都不需要下載bootstrap。如果有樣式調(diào)整，甚至更深入的開發(fā)，才有必要引入其使用的less。