如何在vuejs中使用bootstrap？

精華

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

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

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

}
</script>

在import進(jìn)來(lái)的時(shí)候報(bào)錯(cuò)，
bootstrap

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

標(biāo)簽： bootstrap

回答(4)

jing_cai 2016-10-19

使用bootstrap 還是使用bootstrap css?

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

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

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