# gwms-app

## 项目结构
```
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public  // 静态资源
│   └── index.html
├── src
│   ├── App.vue // 入口文件
│   ├── components  // 通用组件
│   ├── i18n  // 国际化
│   ├── main.ts // 入口文件
│   ├── manifest.json // uniapp配置文件
│   ├── pages // 页面文件
│   ├── pages.json  // 页面配置
│   ├── plugins // 插件
│   ├── sfc.d.ts
│   ├── static  // 静态资源
│   ├── store // Vuex
│   ├── types // 类型订单
│   ├── uni.scss  // uniapp 全局样式
│   └── utils //  工具方法
├── tsconfig.json // TypeScript配置文件
└── yarn.lock
```

### 页面结构（TODO）

```
├── demo // 示例页面
│   ├── index.vue // 页面文件
│   ├── config.ts // 页面相关配置
│   ├── mixin.ts // 页面相关Mixin
│   └── model.ts  // 页面Module
├── system // 系统相关页面
├── index // 首页
└── login // 登录页面
```

## 代码规范

### 注释规范：

- 方法、属性、类型等注释使用
```
/**
 * 注释内容
 */
```
- 行内注释可以使用 `//`

#### 简单示例
```
/**
 * 当前计数
 * @private
 */
private count = 1;

/**
 * 增加当前计数
 * @param delta
 */
@Mutation
increment(delta: number): void {
  // 当前计数++
  this.count += delta;
}
```

### 命名规范：

- 文件名统一小写，多个单词使用`-`连接
- 类型命名使用PascalCase
- 方法及属性名和变量命名camelCase
- 不要使用_作为私有变量前缀，使用private

### 样式规范

- template中`class`名称统一小写，多个单词使用`-`连接
- 尽量避免直接书写行内样式 `style` , 使用 `class` 定义样式
- 组件内优先使用`scoped`样式

### 页面结构：

尽量保持一个页面一个文件夹，命名规则：

- 页面名称：`index.vue`
- 页面Vuex模块：`model.ts`
- 页面相关配置： `config.ts`
- 页面相关Mixin： `mixin.ts`

### Vuex：

- 用户登录状态等会话信息统一放在session模块
- ~~【删】因为已经做了自动引入，不建议使用动态引入，按照规范命名文件即可~~
- ~~【删】不要直接引用model文件，使用相关注解引入@State、@Action~~

### i18n：

- 获取当前语言` this.$i18n.locale `
- 设置当前语言` this.$i18n.locale = 'en'`

## 使用框架库

- [uni-app](https://uniapp.dcloud.io/) - 跨平台开发框架
- [uview-ui](https://uviewui.com/) - uni-app UI组件库
- [dayjs](https://github.com/iamkun/dayjs/) - 日期处理
- [luch-request](https://github.com/lei-mu/luch-request) - uni-app 请求库
- [vue-i18n](https://github.com/kazupon/vue-i18n) - vue 国际化库
- [vue-wait](https://github.com/f/vue-wait) - vue 加载状态库
- [vue-class-component](https://github.com/vuejs/vue-class-component/) - Class方式写Vue组件
- [vue-property-decorator](https://github.com/vuejs/vue-class-component/) - Vue组件装饰器
- [vuex](https://vuex.vuejs.org/zh/) - vue 状态管理
- [vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate/) - vue 数据持久化
- [vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators/) - Vuex创建模块相关装饰器
- [vuex-class](https://github.com/ktsn/vuex-class/) - Vuex绑定相关装饰器

#### 关于Class方式定义Vue(x)组件及相关装饰器(@Decorator)的使用方法

参考以上
[vue-class-component](https://github.com/vuejs/vue-class-component/) 、
[vue-property-decorator](https://github.com/vuejs/vue-class-component/) 、
[vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators/) 、
[vuex-class](https://github.com/ktsn/vuex-class/)
相关库


## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

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