中国平安人寿(香港)
介绍
中国平安人寿(香港) 官网
技术选型
技术框架
项目框架: vuejs
脚手架版本: vue-cli3
开发环境
node 版本: 推荐 v12.10.0 或以上
npm 版本: 推荐 6.10.3 或以上
开始使用
安装依赖 (建议使用国内镜像)
npm install
项目预览
npm run dev
项目打包
npm run build
项目打包 -- 沙箱环境
npm run sandbox
项目结构
.
├── build // webpack相关配置文件
├── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
├── node_modules // 依赖包
├── public // 静态资源目录
├── src // 开发目录
│ ├── api // 数据请求模块
│ ├── assets // 开发相关的静态文件原始资源
│ │ ├── fonts //字体文件
│ │ ├── images // 图片文件
│ ├── common // 通用内容
│ │ ├── lang // 国际化语言包
│ ├── components // 公共组件
│ ├── const // 静态数据
│ ├── mock // 本地数据模拟
│ ├── pages // 页面
│ ├── store // 状态管理
│ ├── style // 公共样式
│ ├── utils // 工具类
│ ├── App.vue // 根组件
│ ├── main.js // 文件入口
│ ├── router.js // 路由
├── test // 测试模块
├── babel.config.js // babel配置文件
├── postcss.config.js // postcss配置文件
├── package.json // 通过src 目录编译后生成的缓存目录
├── README.md // 项目说明
└── vue.config.js // vue 配置
规范说明
vue 文件分离
一般业务.vue 文件通常会在同一目录下拆分为.vue,.js,.scss 三个文件。
正常的创建和引用 vue 文件都是 html、css、js 三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的 html、css、js 分离出来是个很好的选择。
编码规范
本项目不使用 eslint 代码检查工具。
开发人员需遵循 vue 官方风格规范。
样式规范
- 优先使用 _var.scss 声明的样式变量
- font-family 名字顺序 Arial -> Microsoft YaHei
z-index 权重划分
- 遮罩蒙层:5000
- 导航栏:3000
- element-ui:2000+
- 自定义交互组件 如 date-picker: 800-900
- 一般业务级:小于 100
响应式方案
通过 purecss+@media 方式实现。
选取原因：
- 与 bootstrap 相比，purecss 更为轻量。
前后端数据交互
简述
为了实现前后端分离，前后端需要约定一套数据交互规范。后续前后端数据接口的输入输出需要按照本文档执行。
数据格式
数据格式: json
跨域处理使用跨域资源共享(Cross-Origin Resource Sharing)方式，允许跨域的接口需要在返回头中输出相应的 header。
数据接口输出
| 字段 | 数据类型 | 必要 | 参说明 |
|---|---|---|---|
| success | Boolean | Y | 是否请求成功（true：成功，false：失败） |
| errMsg | Integer | N | 请求失败原因 |
| code | String | Y | 请求失败错误代码 |
| content | Object | N | 业务返回具体参数 |
数据加密
请求都需要进行加密。
加密方案：AES+RSA
国际化支持说明
使用说明
采用方案：i18n
在文件入口 main.js 注入 i18n
三语支持(默认繁体):
- 繁体[tc]
- 简体[zh]
- 英文[en]
三语文件所在目录:
执行逻辑
访问页面时，会先从 localStorage 里获取历史选取语言，若活动结果为空，则默认使用繁体。
语言切换时，把当前选择语言注入到 i18n 并埋到 localStorage，同时广播事件，通知页面初始化(重新读取 cms 内容)。
TODO
- 项目后期需补充 SEO 优化插件 PrerenderSPAPlugin