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 - 跨平台开发框架
• uview-ui - uni-app UI组件库
• dayjs - 日期处理
• luch-request - uni-app 请求库
• vue-i18n - vue 国际化库
• vue-wait - vue 加载状态库
• vue-class-component - Class方式写Vue组件
• vue-property-decorator - Vue组件装饰器
• vuex - vue 状态管理
• vuex-persistedstate - vue 数据持久化
• vuex-module-decorators - Vuex创建模块相关装饰器
• vuex-class - Vuex绑定相关装饰器

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

参考以上 vue-class-component 、 vue-property-decorator 、 vuex-module-decorators 、 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.