Nuxt 初體驗

nuxt是什麼？

官網

為什麼要使用nuxt?

解決首屏優化和SEO
參考

相關問題：伺服器渲染和瀏覽器渲染的區別，建議自己搜尋查詢答案 updateDate 8.8

使用過程

• 根據文件初始化專案
  $ vue init nuxt-community/starter-template <project-name>
• 專案中使用了scss,如何讓專案支援scss語法。同時並支援全域性scss變數

1. 根據文件提示，輸入下面命令列
   npm install node-sass sass-loader
2. 同時根據文件，對webpack配置進行擴充套件，在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的引數中是config,所以記得將上面的webpackConfig,改成config,現在重新啟動專案就可以了
3. 支援全域性scss變數

1. 在assets資料夾下新建檔案global.scss,同時在nuxt.config.js中下面在新增一行
   css:[{src:'~assets/css/global.scc',lang:'scss'}]
   如圖：
   

   看劃線處
   
   同時在login.vue中運用，如圖：
   

   看劃線處
   
   現在就支援全域性變數。

• 專案中使用了elementUI,那麼問題來了，怎麼去整合elementUI到專案中去呢？
  ElementUI,看到最下面,然後按照文件上的專案進行設定

因為在這個專案僅對專案進行顏色改換，所以自定義主題進行配置色彩
ps:早點知道這個，就能專案少寫好多東西，是時候優化一下專案了。
按照文件來就好了。沒有什麼注意的。
具體配置如圖：

image.png

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

不過因為在專案中有統一的頭部導航欄，所以之前使用了router-view這個，但是nuxt並沒有相關的api。所以我選擇layout進行解決，主要用來解決網頁頭部導航欄的問題。
步驟：

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

   配置

專案中巢狀路由用的多，同時nuxt並不需要你單獨寫vue-router,你只要在pages目錄中新建檔案，新建資料夾，就會自動生成相關路由，具體參考文件中的巢狀路由部分

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

• 如何使用store?

之前的專案中使用了module進行狀態管理的，因為這個專案是異地遠端協同開發的。所以為了讓狀態不衝突，故選擇了module形式進行開發。

具體如圖

state tree

• 中介軟體，middleware,本專案用的不多，就純粹過個例子。具體參考文件

• static,靜態資源，看需求吧，比如將圖片，字型檔案放入此目錄，

• 剩下就是些資料。api的使用。