# main-frame

**Repository Path**: ct_codex/main-frame

## Basic Information

- **Project Name**: main-frame
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-10
- **Last Updated**: 2024-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 开放平台脚手架

## 脚手架特性

- 全局组件自动注册
- 全局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](https://github.com/commitizen/cz-cli)来规范`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 环境变量和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F)

- 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

## 项目依赖安装

```
gnpm install
```

### 开发阶段：编译、热重载

```
gnpm run dev
```

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

```
gnpm run build
```

### 语法检测

```
gnpm run 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. 直接运行 npm run commit 代替 git commit
2. 全局安装 cz 后运行 git cz 代替 git commit 

```
npm install -g commitizen
npm install -g cz-conventional-changelog
```

参考链接：
[Commit message 和 Change log 编写指南](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)
[Commit types](https://github.com/commitizen/conventional-commit-types)

### 更多配置请参考

查看 [配置参考](https://cli.vuejs.org/zh/config/).