TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 4、《UI系統》

1、前言

在實際業務開發中，會遇到這樣一種需求，使用VUE的頁面須要支持SEO，同時對首屏有指標性要求，目前市面上廣泛使用的是Nuxt.js解決方案，在引入的同時還須要考慮與現有的全棧工程結合，本系列文章探討的是此類全棧工程的解決方案，同時使用的是TypeScript應用於先後端編程，文章中介紹的工程與技術要點源碼已上傳至Github，有須要的朋友可自行下載：
Nuxt.js和Nest.js同構工程

複製代碼

文章意在拋磚引玉，先後端使用同一種語言TypeScript編寫，示例已包含基本接口請求，數據庫鏈接應用，公用模塊封裝等實際開發中使用到的內容。

效果預覽:

如下爲該系列文章入口列表:
TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 1、《簡介》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 3、《配置服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 4、《UI系統》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 5、《API服務設計》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 6、《SEO功能實現》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 10、《工程化部署》

2、將Vant融合進Nuxt.js框中

將Vant融合進Nuxt.js框中，須要對nuxt.config.ts進行一些改造，而且語法規範適合Vant UI框架自身要求。

• 引入公用樣式
  在nuxt.config.ts文件中找到css節點，設置全局CSS，這裏主要作一些全局的margin,padding,背景顏色等設定。

  

  App.styl

  

  
  

• 引入UI框架入口插件
  Vant一樣遵循Vue插件機制，爲避免最終發佈打包體積過大，而且是基於按需導入原則，這裏只註冊須要用到的插件。 在nuxt.config.ts文件中找到plugins節點，導入Vant

  

  

  
  

• REM自動轉換
  本示例主要針對移動端功能頁面，所以，須要額外考慮REM與像素轉換問題，爲了不在實際業務開發中，須要手動進行諸如：1rem = viewWidth / 10的繁鎖計算， 一樣在在nuxt.config.ts文件中找到plugins節點，註冊自動轉換插件。

  

  

  
  至此，關於Nuxt.js中引入Vant UI框架步驟基本完成，從運行效果可看出，使用到Vant 的組件都有自有的類前綴van-xxx，UI生效而且自動進行了REM轉換：

  

  
  

3、nuxt-property-decorator

示例中使用到的是Vant的TypeScript版本，所以，須要用到 Nuxt Property Decorator

該組件專爲Nuxt中使用TypeScript打造，徹底支持全部Vue裝飾器等屬性。

4、經常使用語法

經常使用的語法主要有@Component,@Getter,@Action,asyncData等。詳細可查看官網Github語法對照
舉例：

語法	描述	等價於
@Component	組件	components: { .. }
@Prop()	屬性	props: { .. }
asyncData	異步數據調用	asyncData

5、使用舉例

以示例中購物車頁爲例，通常地，頁面中會使用到：

• 組件使用和基類繼承

  

  在@Component中傳入組件配置JSON對像，使用components節點，定義本頁面須要使用到的組件，進行顯式聲明，繼承自的基類，主要是對全部頁面公用方法屬性的封裝，減小業務代碼。

  

  好比：這裏定義了TDK，那麼在繼承了此類的子類，則不須要重複定義。

• 異步數據調用 Nuxt.js主打的是服務端渲染ssr,所以在頁面未發送到瀏器以前，會先執行asyncData()方法，這裏咱們要作的是重寫和進行頁面生成前的接口數據調用，同時設置SEO使用的TDK數據。

  

  請注意2個關鍵點：
  1.這裏的重寫方法須要帶上方問控制符public或者private，具體使用什麼，依據TSLINT要求設定。
  
  2.如圖紅框所示的頁面屬性，將在asyncData調用後，在頁面在客戶端瀏覽器端初始化時，原封不動地傳回來，即：在客戶端瀏覽器中不須要對一樣的一份數據再次請求。 參考：nuxt 原創系列之asyncData淺析

  

• 生命週期函數重寫
  

  

  mounted()函數重寫，像普通客戶端渲染時使用同樣，定義該函數方法名，該函數在客戶端運行，可利用這一點進行頁面初始化數據設置，STORE數據設置。須要注意的是訪問控制符和返回值(void)
  

• Nuxt.js生命週期中服務端調用方法對照
  

方法名	運行環境	描述
asyncData	SSR & CSR	在組件（限於頁面組件）每次加載以前被調用。它能夠在服務端或路由更新以前被調用。
fetch	SSR	在組件每次加載前被調用（在服務端或切換至目標路由以前）。
nuxtServerInit	SSR	初始化，將服務端的一些數據傳到客戶端時使用。