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

时间 2019-11-06

标签 typescript 工程实战 nuxt nest UI系统栏目 JavaScript 繁體版

原文原文链接

1、前言

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

复制代码

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

效果预览:

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

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

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》async

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	初始化，将服务端的一些数据传到客户端时使用。