河北健康码管理系统

微应急管理端应用模块

当前微应急管理端包含以下模块

• 疫情管理
• 口罩预约
• 捐赠管理
• 交通卡口管理
• 社区出入管理
• 用户分级管理
• ...

参考文档

• 组件文档 参考链接：https://gnpm.govcloud.qq .com/gsd-web/components/button-cn/
• 框架文档 参考链接：https://gnpm.govcloud.qq .com/gsd-web/docs/vue/scaffoldStart-cn/

地方个性化配置

• 可查看./static/js/global-config.js，里面都有对应的注释及示例
• 注意修改配置中的[密码相关公钥]publicKey，该公钥由后端统一生成

开发环境依赖

• node lts版本（或12.12.0+版本）
• yarn 稳定版1.22.0

本地开发、编译依赖包拉取命令

进入项目目录，执行： $ git init $ yarn install

开发命令

$ yarn dev

开发环境打包指令

$ yarn pack:dev

指令说明：

1. 进行开发环境的编译
2. 打包前端入口及资源包（dist.tar.gz）

部署方案：

• dist.tar.gz（部署到服务器的/data/web/wyj-web-admin-saas目录）

测试环境打包命令

$ yarn pack:beta

指令说明：

1. 进行开发环境的编译
2. 打包前端入口及资源包（dist.tar.gz）

部署方案：

• dist.tar.gz（部署到服务器的/data/web/wyj-web-admin-saas目录）

生产环境打包命令

• 默认生产环境：$ yarn pack:prod

指令说明：

1. 进行生产环境的编译
2. 打包前端入口包（dist.tar.gz）
3. 打包前端静态资源包（static.tar.gz）

部署方案：

• dist.tar.gz（部署到服务器的/data/web/wyj-web-admin-saas目录）
• static.tar.gz（部署到 static 机器/data/web/cdn/wyj/web目录）

一些地方个性化配置修改

编译前可查看./public/static/js/global-config.js 若是编译后的，可查看./static/js/global-config.js

里面都有对应的注释及示例

脚手架特性

• 全局组件自动注册
• 全局 scss 自动注入
• 多页入口自动注册
• 多页入口可在内部 config.js 进行重置
• spa 应用 vue-router 的 history 模式下，dev-server 的 rewrite 规则自动化
• publicPath 通过 dotenv 处理，支持多环境区别配置
• eslint+prettier 自动格式化
• 默认集成 polyfill（promise、symbol）
• 打包优化，拆分 assets 可上传到 cdn
• git commit 前做 lint 校验
• git commit 使用commitizen来规范commit msg
• 开放平台子应用基础依赖
• 开放平台 sdk

全局组件自动注册

只需要在src/components目录下新建一个叫_base.vue的文件，并命名则可以由系统进行自动注册，具体用法请参考：src/components/example/_base.vue

如上会自动创建一个叫CommonExample的全局组件，可以在工程里所有vue文件中直接使用

全局 scss 文件自动注入

主需要在src/assets/styles目录下，把需要全局注入的 scss 文件命名为_开头，则会触发脚手架全局自动注册逻辑，可参考初始化出来的src/assets/styles目录

多页入口自动注册、配置覆盖

案例参考：src/pages/example 具体页面入口配置可参考：src/pages/example/config.js（若无该config.js文件则会默认执行系统的自动注册逻辑）

特性：

• 项目vue-router默认为history模式
• dev-server自动处理开发阶段必须的路由rewrite规则

部署 nginx 配置：

以本次的example为例子，假设 build 后的文件都部署在服务器的/data/web/example目录

location / {
     add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
     root /data/web/example;
     try_files $uri $uri/ /index.html;
}

publicPath（发布路径）多环境支持

请参考根目录下的.env开头的文件，也可以参考vuecli 环境变量和模式

• VUE_APP_ENV：当前执行环境，可选dev、beta、prod等
• VUE_APP_MODEL：当前编译模式，可选local、online
• VUE_APP_CDN_PATH：开发阶段 html 中script、link等输出的目录；发布阶段静态文件引用的路径，如https://static.govcloud.gtimg.com/cdn/zwopen/mp/official/cdn-test/
• VUE_APP_ROUTER_BASE：与vue-router的base相关的地址，默认为/
• VUE_APP_API_BASE_URL：后端接口默认域名，如http://127.0.0.1:5010/
• VUE_APP_API_ROUTER：后端接口默认路由，如api/xxx

打包优化，拆分 assets 可上传到 cdn

如有将静态文件上传至cdn的需求，可参考上面publicPath的配置，然后 build 后把dist/assets打包上传至 cdn

项目依赖安装

yarn install

开发阶段：编译、热重载

yarn dev

生成阶段：编译入口文件+静态资源

yarn build

语法检测

yarn lint

git 提交规范

项目使用 git commit-msg hook 校验提交信息格式。 开发者需要按照 前缀: 详情 格式进行提交，否则无法通过校验。

前缀规范如下：

• feat: 新功能（feature）
• fix: 修补 bug
• docs: 文档（documentation）
• style: 格式（不影响代码运行的变动）
• refactor: 重构（即不是新增功能，也不是修改 bug 的代码变动）
• perf: 性能优化
• test: 增加测试
• build: 编译相关的修改（例如 webpack, npm, gulp 等）
• ci: CI 相关的修改（例如 Travis, Circle 等）
• chore: 构建过程或辅助工具的变动
• revert: 回滚上一次 commit

commit 示例：

feat: 新增后台管理页面

开发者如果对以上规范不熟悉，可以使用辅助工具代替 git commit 进行提交。 有以下两种方式：

1. 直接运行 yarn commit 代替 git commit
2. 全局安装 cz 后运行 git cz 代替 git commit

yarn global add commitizen
yarn global add cz-conventional-changelog

参考链接： Commit message 和 Change log 编写指南 Commit types

更多配置请参考

查看 配置参考.

QA

1.进行二次开发时，依赖包下载失败

• 检查node版本，要求12.12.0或以上
• 检查yarn版本，要求稳定版
• git init
• yarn install

2.访问服务器上的后台接口失败

• 要在vue.config.js中找到proxy进行配置，配置为相应访问地址

3.导出功能失败

• 项目脚手架对axios封装为request，导出接口返回的是文件流，对request来说，为非标准接口，需要在src/core/config/index.js文件中的非标准数组config.offStandardRequest加上该导出地址。同时还应该注意，给导出文件命名为.xls还是.xlsx格式，要和后台的规定对齐

4..evn文件中的VUE_APP_SPO_ROUTER作用

• 用于开发测试环境不隔离的情况，避免摇号程序测试中其他服务不可用的情况。摇号接口路由为spo_test，其他为spo。正式环境统一都为spo