中国平安人寿(香港)

介绍

中国平安人寿(香港) 官网

开始使用

安装依赖 (建议使用国内镜像)

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 配置

前置说明

开发环境

脚手架版本: CLI3

node版本: 推荐v12.10.0或以上

npm版本: 推荐6.10.3或以上

规范说明

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要轻量得多

数据加密

请求都需要进行加密。

加密方案：AES+RSA

国际化支持说明

使用说明

采用方案：i18n

在文件入口main.js注入i18n

三语支持(默认繁体):

• 繁体[tc]
• 简体[zh]
• 英文[en]

执行逻辑

访问页面时，会先从localStorage里获取历史选取语言，若活动结果为空，则默认使用繁体。

语言切换时，把当前选择语言注入到i18n并埋到localStorage，同时广播事件，通知页面初始化(重新读取cms内容)。

TODO

• 项目后期需补充 SEO优化插件 PrerenderSPAPlugin