Wyj-web-admin-saas NPM

河北健康码管理系统

微应急管理端应用模块

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

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

参考文档

组件文档参考链接：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

指令说明：

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

部署方案：

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

测试环境打包命令

$ yarn pack:beta

指令说明：

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

部署方案：

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

生产环境打包命令

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

指令说明：

进行生产环境的编译
打包前端入口包（dist.tar.gz）
打包前端静态资源包（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 进行提交。有以下两种方式：

直接运行 yarn commit 代替 git commit
全局安装 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

wyj-web-admin-saas v2.7.1

河北健康码管理系统

微应急管理端应用模块

参考文档

地方个性化配置

开发环境依赖

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

开发命令

开发环境打包指令

测试环境打包命令

生产环境打包命令

一些地方个性化配置修改

脚手架特性

全局组件自动注册

全局 scss 文件自动注入

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

部署 nginx 配置：

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

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

项目依赖安装

开发阶段：编译、热重载

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

语法检测

git 提交规范

更多配置请参考

QA