nuxt是什么？
為什么要使用nuxt?
解決首屏優(yōu)化和SEO
參考相關(guān)問(wèn)題：服務(wù)器渲染和瀏覽器渲染的區(qū)別凄敢，建議自己搜索查詢答案 updateDate 8.8
使用過(guò)程
- 根據(jù)文檔初始化項(xiàng)目
$ vue init nuxt-community/starter-template <project-name> - 項(xiàng)目中使用了scss,如何讓項(xiàng)目支持scss語(yǔ)法。同時(shí)并支持全局scss變量
- 根據(jù)文檔提示，輸入下面命令行
npm install node-sass sass-loader- 同時(shí)根據(jù)文檔，對(duì)webpack配置進(jìn)行擴(kuò)展，在nuxt.config.js中的extend下面加
const vueLoader = webpackConfig.module.rules.find((rule) => rule.loader === 'vue-loader');vueLoader.options.loaders.sass = 'vue-style-loader!css-loader!sass-loader'
!!! 注意：初始化的extend的參數(shù)中是config,所以記得將上面的webpackConfig,改成config,現(xiàn)在重新啟動(dòng)項(xiàng)目就可以了- 支持全局scss變量
- 在assets文件夾下新建文件global.scss,同時(shí)在nuxt.config.js中下面在添加一行
css:[{src:'~assets/css/global.scc',lang:'scss'}]
如圖：看劃線處
同時(shí)在login.vue中運(yùn)用波丰，如圖：看劃線處
現(xiàn)在就支持全局變量壳坪。
- 項(xiàng)目中使用了elementUI,那么問(wèn)題來(lái)了，怎么去集成elementUI到項(xiàng)目中去呢掰烟？
ElementUI,看到最下面,然后按照文檔上的項(xiàng)目進(jìn)行設(shè)置
因?yàn)樵谶@個(gè)項(xiàng)目?jī)H對(duì)項(xiàng)目進(jìn)行顏色改換爽蝴，所以自定義主題進(jìn)行配置色彩
ps:早點(diǎn)知道這個(gè)，就能項(xiàng)目少寫好多東西纫骑，是時(shí)候優(yōu)化一下項(xiàng)目了蝎亚。
按照文檔來(lái)就好了。沒(méi)有什么注意的先馆。
具體配置如圖：image.png
- 因?yàn)閚uxt集成vue全家桶的发框，所以我們不需要額外配置了。
不過(guò)因?yàn)樵陧?xiàng)目中有統(tǒng)一的頭部導(dǎo)航欄煤墙，所以之前使用了router-view這個(gè)梅惯，但是nuxt并沒(méi)有相關(guān)的api宪拥。所以我選擇layout進(jìn)行解決，主要用來(lái)解決網(wǎng)頁(yè)頭部導(dǎo)航欄的問(wèn)題铣减。
步驟：
- 在components目錄下新建一個(gè)headernav.vue,使用el-menu
- 在layouts目錄下面在新建一個(gè)index.vue,引用這個(gè)上面新建的組件headernav
- 在pages中的index.vue中加入
layout(context){return 'index'},就引入布局
具體如圖：配置
項(xiàng)目中嵌套路由用的多她君，同時(shí)nuxt并不需要你單獨(dú)寫vue-router,你只要在pages目錄中新建文件，新建文件夾葫哗，就會(huì)自動(dòng)生成相關(guān)路由缔刹，具體參考文檔中的嵌套路由部分
error頁(yè)面也可以參考文檔，故不再敘述劣针。到此解決項(xiàng)目的路由問(wèn)題
- 如何使用store?
之前的項(xiàng)目中使用了module進(jìn)行狀態(tài)管理的校镐，因?yàn)檫@個(gè)項(xiàng)目是異地遠(yuǎn)程協(xié)同開(kāi)發(fā)的。所以為了讓狀態(tài)不沖突酿秸，故選擇了module形式進(jìn)行開(kāi)發(fā)灭翔。
具體如圖state tree
中間件，middleware,本項(xiàng)目用的不多辣苏，就純粹過(guò)個(gè)例子肝箱。具體參考文檔
static,靜態(tài)資源，看需求吧稀蟋，比如將圖片煌张，字體文件放入此目錄，
剩下就是些數(shù)據(jù)退客。api的使用骏融。
