中国平安人寿(香港)

介绍

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

技术选型

技术框架

项目框架: 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优化，目标页面需讨论协商。

dev / pingan-life-index-pro

pingan-life-index-pro