# <%= appName %>

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Run your unit tests

```
npm run test:unit
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### 项目访问 URL

### 项目整体特性

使用 typescript，并且类型定义统一在 types 文件夹中，建议使用 module 来管理类型，而不是 script 来创建全局的类型。
`tsconfig.json`作为编辑器的默认配置文件，方便编辑器识别。

使用 esm 模块化规范

使用 npm 作为包管理

使用 git 作为代码版本工具。

编码规范使用 eslint+prettier+editorconfig+git-hooks

git commit message 采用 angular 规范，以及使用 commitlint 校验

使用 yorkie 自动化校验并格式化代码，自动化校验 commit message

使用 jest 作为单元测试，统一放在`tests`文件夹中。

技术选型，vue+vue-router+ant-design-vue+use-vue-service

[定制主题](https://2x.antdv.com/docs/vue/customize-theme-cn)
css 模块化方案必须接入，必须支持 css 变量，即 less 或 sass
不允许直接写颜色值，只能定义若干种颜色，所有颜色统一管理

接入 storybook，快速开发调试组件

接入 sentry，只在 production 模式生效，还需要手动配置 token 和各种参数
接入 sentry 的性能监控

接入 cdn 静态资源部署，只在 production 模式生效，还需要手动配置部署目录，一般就是项目名

接入数据埋点，使用公司的 sdk，神策和数仓双埋点

把 ajax 封装成服务，需要时采用依赖注入的方式来调用相应的接口

接入 standard-version，进行发版记录 changelog

使用 lodash-es 代替 lodash，可以实现按需加载

忽略掉所有 moment 的本地化语言包，并且设置国际化语言为中文。
没有使用 dayjs 替换 moment，主要是担心可能存在的 bug 风险。

多页面应用支持，当然不是真正意义上的多页面，而是指根路由不包含导航栏，这样可以是实现多页面的效果。

在 utils/environment 文件中有提供环境检测的结果，以及对应的域名。

前后端域名独立部署，接口域名跨域处理。

> 前端项目脱离所有静态资源，所有接口的限制，可以部署到任意地方，比如 cdn 上。
> 前端项目可以直接指定接口的域名，方便对接各种测试环境和线上环境

前后端彻底分离需要解决跨域问题，需要设置跨域头，下面 nginx 配置可以允许所有二级域名。同时兼顾便利性和安全性。

```
if ($http_origin ~* (http?://.*\.test\.cn$)) {
  add_header 'Access-Control-Allow-Origin' $http_origin;
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'sentry-trace,authorization,origin';
  add_header 'Access-Control-Max-Age' 86400;
}
```

开发规范，切分支开发新需求，可以尽早提交 merge request 给 reviewer 进行 review 代码。

如果有多个需求需要共享测试环境，那么可以把自己开发的需求分支合并到 test-deploy 分支上，然后在测试环境中部署 test-deploy 分支。

接入 font-awesome，这个比较适合个人项目，因为公司项目 UI 不可控，但是也先接入进来吧。

实现了一个 Sample 组件，内部展示了各种示例。
如何加载图片资源，svg 资源，fontawesome 字体，iconfont 字体，音频、视频、json 资源
尽量放在项目内部维护静态资源，通过构建放到 cdn 上，而不是自己手动放到 cdn 上，然后在代码中直接引用资源链接。因为这样导致整个项目是割裂的。

页面权限管理，登录用户才可见，或者有权限的用户可见

#### 暂时不需要的功能

添加 issues.md，记录待解决的问题，适合个人项目  
添加.vscode，可以配置调试功能，适合 nodejs 项目  
添加 github workflows，可以配置自动化构建，适合个人项目  
添加 e2e 测试，适合长期核心项目  
添加 vconsole 插件，适合移动端项目  
微信 sdk 相关封装代码-分享逻辑、oauth 登录  

接入 sentry 的用户反馈功能，目前不支持上传图片的功能，而且默认关联到最近一次异常，这种使用场景更像是异常发生时的 toast 提示。但是我的本意是用户反馈应该是作为一个可选功能，用户在发生异常时，可以截图上报异常。  

全局变量说明  
Sentry 可以手动上报异常信息  
analysisSdk 可以在登录时设置埋点的用户 id  
eventTrack 可以手动上报事件埋点  

### 待办

是否可以自动化生成 ts 类型文件，甚至于自动化生成接口文件。

### 统一接口规范

接口返回值统一格式

```json
{
  "errCode": 0,
  "errMsg": "some msg",
  "data": {} // 注意这里必须是一个对象，而不能是一个数组或数字或字符串
}
```

接口统一路径为`https://xxx.yyy.com/api/project/v1/xxx/yyy`

统一通过 yapi 来管理 api