云平台前端原型项目

Gidc Bank Property

版本: v2.0.1

目录结构

.
├── config # 模块、代理、打包配置
├── dist # 打包之后的问天所在位置
│   ├── web # 打包后的web文件
│   └── zip # 对应模块的zip
├── public # 静态资源文件
└── src # 主资源
    ├── assets # 资源包
    │   ├── css # 初始化样式
    │   └── theme # 主题及公共样式
    ├── common # 公共依赖
    │   ├── filters # 公共过滤器
    │   ├── jsBridge # 客户端接口
    │   ├── load # 加载load框
    │   ├── mixin # 混入
    │   ├── request # http请求封装
    │   ├── utils # 公共方法
    │   ├── validate # 全局表单验证配置
    │   └── vConsole # vConsole
    ├── components # 公共组件
    ├── config # 客户端模式配置
    └── modules # 模块
        ├── demo # demo示例
        └── main # 主包，如无特殊需求，请勿修改

开发

安装（必须使用 yarn）

yarn install
# 需使用内网镜像 http://192.111.36.97:4995/repository/npm-group/
# yarn install --registry=http://192.111.36.97:4995/repository/npm-group/

运行
```
yarn serve
```
之后在浏览器地址栏中输入http://localhost:<port>/<模块名称>#/<路由名>即可访问

编译、打包

yarn build:all # 打包全部模块
yarn build -- [module] # 打包模块名称

增加模块
1. 在config目录的modules.config.js中新增模块配置
```
/**
 * 多模块入口配置
 */
const businessArray = [
  {
    /* 主包 */
    chunk: 'main',
    chunkName: '主包',
    template: 'src/modules/main/index.html'
  },
  {
    /* 子包demo */
    chunk: 'demo',
    chunkName: 'demo'
  }
]
// ......
```
  - chunk: 模块 id，唯一值，不可重复
  - chunkName: 模块名称
  - template: 静态资源index.html模版，若不设置则使用公共模版文件
2. 在src/modules下新增一个 vue 入口文件main.js和App.vue，具体可以参考demo模块，如下例为最基础 vue 入口配置
```
└── <modules name>
    ├── main.js
    └── App.vue
```

引入资源路径

// 引入公共资源
import xxx from '@/xxx' // @符代表src文件夹

// 引入模块内的资源
import xxx from '@demo/xxx' // @demo代表modules/demo文件夹

客户端模式

export default {
  // true 客户端模式，发送接口调用原声api，false 网页调试模式
  $setClientMode: true
}

svg 图标的使用

// 先引入svg图标（所有的svg图标都存放在 src/assets/icon/svg 文件夹中）
import '@/assets/icon/svg/xxx.svg' // xxx 为svg文件夹中的svg图标名，需要与 name 属性一一对应

<!-- name 属性为svg图标文件名 -->
<md-icon name="xxx" color="#595959" svg />

表单校验
- 组件库扩充的表单验证在 node_modules/@gidc/plugin/config/validate 中可以查看
- 如需查看所有规则（包括默认规则）可以打印 this.$validator.rules 查看
- 想要修改表单验证的提示语以及添加公共的校验规则都可以在 src/common/validate 中修改
- 表单校验的使用在 demo 包中有简单的事例
- 表单校验注意
```
// 结果返回一个promise对象，只会返回所有表单是否通过验证
this.$validator.validateAll()

// 这个数组中包含所有校验失败的信息，一般只会用第一条就行
this.errors.items
```

带路由信息跳转 zip 包

需要在目标 zip 包的 App.vue 中添加接收路由的处理

// 接受路由参数跳转对应协议
await this.$router.push(await this.$utils.getData('jumpPackageRoute'))
this.$utils.removeData('jumpPackageRoute')

在跳包的时候先传入路由再跳包，即可完成带路由跳包

this.$utils.setData('jumpPackageRoute', 'userPrivacyPolicy')
this.$utils.goPackage('modulesPublic')

提交日志格式

代码提交规范请按照代码提交规范的要求书写

该工程提交日志校验规则遵循 commitlint 和 Google Angular 的默认格式

# 注意：冒号前面是需要一个空格的, 带 ？ 表示非必填信息
type(scope?): subject
body?
footer?

各关键字含义如下:

scope 指 commit 的范围（哪些模块进行了修改）
subject 指 commit 的简短描述
body 指 commit 主体内容（长描述）
footer 指 commit footer 信息
type 指当前 commit 类型，一般有下面几种可选类型:

类型	描述
build	主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci	主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交
docs	文档更新
feat	新增功能
merge	分支合并 Merge branch ? of ?
fix	bug 修复
perf	性能, 体验优化
refactor	重构代码(既没有新增功能，也没有修复 bug)
style	不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
test	新增测试用例或是更新现有测试
revert	回滚某个更早之前的提交
chore	不属于以上类型的其他类型

Current Tags

1.0.1 ... latest (2 years ago)

2 Versions

1.0.1 ... 2 years ago
1.0.0 ... 2 years ago