nuxt是什么？

官網(wǎng)

為什么要使用nuxt?

解決首屏優(yōu)化和SEO
參考

相關(guān)問題：服務(wù)器渲染和瀏覽器渲染的區(qū)別，建議自己搜索查詢答案 updateDate 8.8

使用過程

• 根據(jù)文檔初始化項目
  $ vue init nuxt-community/starter-template <project-name>
• 項目中使用了scss,如何讓項目支持scss語法。同時并支持全局scss變量

1. 根據(jù)文檔提示，輸入下面命令行
   npm install node-sass sass-loader
2. 同時根據(jù)文檔，對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)在重新啟動項目就可以了
3. 支持全局scss變量

1. 在assets文件夾下新建文件global.scss,同時在nuxt.config.js中下面在添加一行
   css:[{src:'~assets/css/global.scc',lang:'scss'}]
   如圖：
   看劃線處
   
   同時在login.vue中運用，如圖：
   看劃線處
   
   現(xiàn)在就支持全局變量。

• 項目中使用了elementUI,那么問題來了，怎么去集成elementUI到項目中去呢？
  ElementUI,看到最下面,然后按照文檔上的項目進(jìn)行設(shè)置

因為在這個項目僅對項目進(jìn)行顏色改換，所以自定義主題進(jìn)行配置色彩
ps:早點知道這個，就能項目少寫好多東西，是時候優(yōu)化一下項目了。
按照文檔來就好了。沒有什么注意的。
具體配置如圖：

image.png

• 因為nuxt集成vue全家桶的，所以我們不需要額外配置了。

不過因為在項目中有統(tǒng)一的頭部導(dǎo)航欄，所以之前使用了router-view這個，但是nuxt并沒有相關(guān)的api。所以我選擇layout進(jìn)行解決，主要用來解決網(wǎng)頁頭部導(dǎo)航欄的問題。
步驟：

1. 在components目錄下新建一個headernav.vue,使用el-menu
2. 在layouts目錄下面在新建一個index.vue,引用這個上面新建的組件headernav
3. 在pages中的index.vue中加入layout(context){return 'index'},就引入布局
   具體如圖：
   配置

項目中嵌套路由用的多，同時nuxt并不需要你單獨寫vue-router,你只要在pages目錄中新建文件，新建文件夾，就會自動生成相關(guān)路由，具體參考文檔中的嵌套路由部分

error頁面也可以參考文檔，故不再敘述。到此解決項目的路由問題

• 如何使用store?

之前的項目中使用了module進(jìn)行狀態(tài)管理的，因為這個項目是異地遠(yuǎn)程協(xié)同開發(fā)的。所以為了讓狀態(tài)不沖突，故選擇了module形式進(jìn)行開發(fā)。

具體如圖

state tree

• 中間件，middleware,本項目用的不多，就純粹過個例子。具體參考文檔

• static,靜態(tài)資源，看需求吧，比如將圖片，字體文件放入此目錄，

• 剩下就是些數(shù)據(jù)。api的使用。