TS说明 | Sonder

项目概述

本项目是基于 VUE 2.6, ViewUI 4.1封装的一套中后台前端库，项目使用 Typescript 语言开发。

项目功能有：

登录 / 注销
权限验证
- 页面权限
- 指令权限

目录结构

本项目已经为你生成了一个完整的开发框架，提供了涵盖后台开发的各类功能，下面是整个项目的目录结构。

├── public                     # 静态资源 (会被直接复制)
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源 (由 webpack 处理加载)
│   ├── components             # 全局组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局过滤函数
│   ├── icons                  # svg 图标
│   ├── layout                 # 布局
│   ├── locale                 # 国际化
│   ├── pwa                    # PWA service worker 相关的文件
│   ├── router                 # 路由
│   ├── store                  # 全局 vuex store
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局工具或方法
│   ├── views                  # 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── settings.ts            # 设置文件
│   └── shims-vue.d.ts         # 模块注入
├── .browserslistrc            # browserslistrc 配置文件 (用于支持 Autoprefixer)
├── .editorconfig              # 编辑相关配置
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置
├── .prettierrc                # 代码规则配置
├── babel.config.js            # babel-loader 配置
├── package.json               # package.json 依赖
├── tsconfig.json              # typescript 配置
└── vue.config.js              # vue-cli 配置

项目参考

关于 Typescript 语言

本项目为什么要使用 TS 开发？我该怎样学习TS？TS有什么好？

具体可查看以下文章：

中文版文档

可查看 tslang 中的手册指南

使用 Vs Code 开发

如果使用 VisualStudio Code 开发还需要更新替换部分文件。

详情请查看 support 目录下的 Readme 文件
如果需要更改 Vscode 设置的，请不要修改项目中的.vscode中的内容，如确实需要修改，建议优先修改“用户”的配置

ViewUI 文档

ViewUI

注意：项目中引入了 iview-loader , 建议在 < template > 中使用带 ==i-== 前缀

关于类装饰器的用法可查看以下文档

VUE组件 JS 与 TS 的写对比
-vue-property-decorator使用指南

如何开始

# 安装依赖
yarn install 或 npm install

# 本地开发 启动项目
yarn serve 或 npm run serve

代码风格指南

本项目配置了 ESLint 代码检测。

代码风格默认使用 ‘@vue/standard’， ‘@vue/standard’， ‘@vue/typescript/recommended’ 配置

强列建议使用 vs code 进行代码编写

命名规范

组件命名

自定义组件文件名须 全小写，多个单词的需使用 ‘-’ 连接，建议组件使用目录包裹，并在 index.ts 导出方法或属性

components/
├── todo-list/
    ├── index.vue
    └── index.ts

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

components/
├── todo-list/
    ├── todo-list-item.vue
    ├── todo-list.vue
    └── index.ts

.vue 文件中组件类命名

组件中类名必须使用大驼峰(PascalCase)名命

@Prop 属性命名

在声明 prop 的时候，其命名应该始终使用小驼峰(camelCase)，而在模板和 JSX 中应该始终使用 kebab-case。

Vuex 模块命名

模块类名需使用大驼峰(PascalCase)命名
@Mutation 需定义为私有方法，并使用常量式命名全大写加下划线式命名
@Action 使用大驼峰命名
其他使用小驼峰命名(state, getters)

接口命名

所有接口须使用大写I开头
后端接口返回数据口结尾需带有Dto(数据传输对象)字符

代码规范

模板代码

模板代码统一使用横线连接 (kebab-case)，包括 ViewUI 的组件

<!-- 在 template 模板中 -->
// 错误
<Button type="primary" icon="ios-search">Search</Button>

// 正确
<i-button type="primary" icon="ios-search">Search</i-button>

自闭合标签

没有内容的组件应该是自闭合的，但在模板里不要这样做。

<!-- 在 template 模板中 -->
// 错误
<my-component/>

// 正确
<my-component></my-component>

行结束符

原vue代码一般情况下不需要 ‘;’ 行结束符的，但在使用ts时这样并不友好。
所以本项目每行结束需要加上 ‘;’

补充类型

由于ts代码需编译的原因，所以一般情况下需要对变量等补充类型定义，这样也利于开发和代码自动补充，也利于便团队开发。

随了上述提到的风格指南外，其他的可参照 Vue 官方风格指南优先级 B 的规则