README.md
3.29 KB
中国平安人寿(香港)
介绍
中国平安人寿(香港) 官网
开始使用
安装依赖 (建议使用国内镜像)
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