TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》TypeScript

一、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面需要支持SEO，同时对首屏有指标性要求，目前市面上普遍使用的是Nuxt.js解决方案，在引入的同时还需要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于前后端编程，文章中介绍的工程与技术要点源码已上传至Github，有需要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

文章意在抛砖引玉，前后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库连接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

以下为该系列文章入口列表:
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 一、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 二、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 三、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 八、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 九、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》

二、将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转换：

三、nuxt-property-decorator

示例中使用到的是Vant的TypeScript版本，因此，需要用到 Nuxt Property Decorator

该组件专为Nuxt中使用TypeScript打造，完全支持所有Vue装饰器等属性。

四、常用语法

常用的语法主要有@Component,@Getter,@Action,asyncData等。详细可查看官网Github语法对照
举例：

语法	描述	等价于
@Component	组件	components: { .. }
@Prop()	属性	props: { .. }
asyncData	异步数据调用	asyncData

五、使用举例

以示例中购物车页为例，一般地，页面中会使用到：

组件使用和基类继承
在@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	初始化，将服务端的一些数据传到客户端时使用。