|
|
# 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/).
|