README.md



中国平安人寿(香港)


介绍

本工程为“中国平安人寿(香港) 官网”前端项目工程。


技术选型


技术框架

项目框架: 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 
导航栏:4000
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 内容)。


备注

pages目录下，只有一个空vue文件的目录均为顺应要求临时占坑。


本地测试账号

91249124/ccc123!@# (可能会失效)


TODO


 后期需补充SEO优化，目标页面需讨论协商。