Bulma 好用谣沸，不過(guò)對(duì)于一個(gè)“高級(jí)”UI組件項(xiàng)目來(lái)說(shuō)，一次全部組件樣式加載笋颤，也是一個(gè)不太拿得出手的事乳附。項(xiàng)目進(jìn)行了一部分，重新改造一下吧伴澄！
- 重新安裝Nuxt項(xiàng)目赋除，官方推薦了兩種方式，之前測(cè)試過(guò)非凌，用yarn的方式下載模板真快啊举农，不過(guò)安裝依賴(lài)的時(shí)候就報(bào)錯(cuò)，不知道為什么敞嗡，前幾天還沒(méi)這個(gè)問(wèn)題颁糟；那就繼續(xù)用npx的方式吧，雖然慢點(diǎn)喉悴，不過(guò)能安裝成功棱貌，不多說(shuō)
npx create-nuxt-app <項(xiàng)目名>
yarn create nuxt-app <項(xiàng)目名>
- 安裝過(guò)程中的選擇
- 在上篇文章討論了，新版本的Nuxt已經(jīng)不能選擇服務(wù)器端框架了箕肃，需要自己配置婚脱，請(qǐng)參考上次的文章
- UI類(lèi)庫(kù)肯定還是選擇Bulma，不過(guò)不用Nuxt自己封裝的了。我看了源碼起惕，目前Bulma的最新版本是0.9涡贱，Nuxt里面封裝的Bulma版本是0.8，所以選擇UI框架的時(shí)候惹想，不做選擇问词，后面自己安裝。詳請(qǐng)如下
// 安裝bulma
npm install bulma --save
// nuxt.config.js
css: [
'bulma/css/bulma.min.css',
'font-awesome/css/font-awesome.min.css',
'@/assets/css/base.css'
]
注意：這里還是全部引入了Bulma的樣式嘀粱，不是本文討論的重點(diǎn)激挪，只是說(shuō)明可以用這樣的方式替代掉默認(rèn)的Bulma
- Axios是不是要選擇Nuxt中自己封裝的？
- Nuxt的文檔中強(qiáng)烈的推薦用他們自己封裝的Axios锋叨，而且他們還專(zhuān)門(mén)針對(duì)自己封裝的Axios寫(xiě)了比較詳細(xì)的文檔垄分，用它會(huì)省去很多麻煩
- 我也嘗試了幾個(gè)項(xiàng)目了，是不用做什么操作就可以直接用了（可以看之前的文章）娃磺，不過(guò)真是感覺(jué)很不習(xí)慣薄湿。特別是我們單獨(dú)封裝的數(shù)據(jù)層后，不能直接從封裝好的'@nuxtjs/axios'中導(dǎo)入axios對(duì)象偷卧，只能把$axios對(duì)象從vuex中傳到數(shù)據(jù)層豺瘤，感覺(jué)有點(diǎn)不忍直視
- 官方文檔給出的用Nuxt封裝的理由就是他們是用的單個(gè)axios實(shí)例，我們也自己封裝下就行听诸，其實(shí)之前也都是這么做
- 安裝sass
// 安裝開(kāi)發(fā)時(shí)依賴(lài)
npm install node-sass sass-loader --save-dev
// vue組件中
<style lang="sass" scoped>
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"
</style>
如上面代碼坐求，開(kāi)發(fā)一個(gè)UI組件項(xiàng)目，就可以按需按模塊引入Bulma晌梨，UI組件庫(kù)的體積肯定會(huì)星培汀；而且最重要的是我們可以對(duì)用戶(hù)“隱藏”Bulma仔蝌，讓我們的用戶(hù)不需要學(xué)習(xí)Bulma泛领，甚至都感受不到Bulma的存在，而很方便的做出漂亮的界面和元素敛惊！
