mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
docs(projects): 文档更新
This commit is contained in:
Soybean
47
doc/TS写法规范.md
Normal file
47
doc/TS写法规范.md
Normal file
@ -0,0 +1,47 @@
|
||||
### 1.interface和type
|
||||
|
||||
##### interface和type使用优先级：能用interface表示的类型就用interface。
|
||||
|
||||
### 2.请求函数
|
||||
|
||||
#### api接口：
|
||||
|
||||
统一以 **fetch** 开头，例如：
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* 获取用户信息
|
||||
* @param id - 用户唯一标识id
|
||||
*/
|
||||
function fetchUserInfo(id：string) {
|
||||
// ***
|
||||
}
|
||||
/**
|
||||
* 删除列表项
|
||||
* @param id - 列表id
|
||||
*/
|
||||
function fetchDeleteListItem(id：string) {
|
||||
// ***
|
||||
}
|
||||
```
|
||||
|
||||
#### middleware中间件：
|
||||
|
||||
统一以 **handle** 开头，例如
|
||||
|
||||
```typescript
|
||||
/**接口返回的用户信息 */
|
||||
interface ResponseUserInfo {
|
||||
userId: string;
|
||||
userName: string;
|
||||
userAge: number;
|
||||
}
|
||||
/**
|
||||
* 获取用户信息 中间件
|
||||
@param data - 返回的用户信息
|
||||
*/
|
||||
function handleUserInfo(data: ResponseUserInfo): UserInfo {
|
||||
// ***
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
### script-setup写法
|
||||
|
||||
#### 第一部分书写
|
||||
|
||||
template
|
||||
|
||||
#### 第二部分
|
||||
|
||||
script
|
||||
|
||||
##### 一、import的顺序
|
||||
|
||||
1. vue模块
|
||||
2. vue相关类型
|
||||
3. vue-router模块
|
||||
4. vue-router相关类型
|
||||
5. UI框架模块
|
||||
6. UI框架相关类型
|
||||
7. 第三方依赖
|
||||
8. 第三方依赖相关类型
|
||||
9. @/enum
|
||||
10. @/setting
|
||||
11. @/plugins
|
||||
12. @/layouts
|
||||
13. @/views
|
||||
14. @/components
|
||||
15. @/hooks
|
||||
16. @/store
|
||||
17. @/context
|
||||
18. @/router
|
||||
19. @/service
|
||||
20. @/utils
|
||||
21. @/interface
|
||||
22. @/assets
|
||||
23. 相对路径依赖
|
||||
|
||||
##### 二、TS类型声明
|
||||
|
||||
##### 三、defineProps、defineEmits、defineExpose、withDefaults
|
||||
|
||||
1. 定义属性，如：
|
||||
|
||||
`interface Props {`
|
||||
|
||||
`name: string;`
|
||||
|
||||
`age?: number;`
|
||||
|
||||
`}`
|
||||
|
||||
`const props = withDefaults(defineProps<Props>(), {`
|
||||
|
||||
`age: 24`
|
||||
|
||||
`})`
|
||||
|
||||
其中name是必须的属性，age是可选属性，通过withDefaults添加默认值
|
||||
|
||||
2. 定义emit事件
|
||||
|
||||
`const emit = defineEmits<{`
|
||||
|
||||
`(e: 'event-name', param: number): void;`
|
||||
|
||||
`}>()`
|
||||
|
||||
##### 四、响应式use函数
|
||||
|
||||
有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。
|
||||
|
||||
##### 五、变量、函数声明
|
||||
|
||||
##### 六、vue生命周期函数、nextTick执行
|
||||
209
doc/vue书写规范.md
Normal file
209
doc/vue书写规范.md
Normal file
@ -0,0 +1,209 @@
|
||||
### script-setup写法
|
||||
|
||||
#### 第一部分
|
||||
|
||||
##### template
|
||||
|
||||
#### 第二部分
|
||||
|
||||
##### script
|
||||
|
||||
##### 一、import的顺序, 依次按照下面的顺序。
|
||||
|
||||
1. vue模块
|
||||
|
||||
```typescript
|
||||
import { } from 'vue';
|
||||
```
|
||||
|
||||
2. vue相关类型
|
||||
|
||||
```typescript
|
||||
import type { } from 'vue';
|
||||
```
|
||||
|
||||
3. vue-router模块
|
||||
|
||||
```typescript
|
||||
import { } from 'vue-router';
|
||||
```
|
||||
|
||||
4. vue-router相关类型
|
||||
|
||||
```typescript
|
||||
import type { } from 'vue-router';
|
||||
```
|
||||
|
||||
5. UI框架模块
|
||||
|
||||
```typescript
|
||||
import { } from 'naive-ui';
|
||||
```
|
||||
|
||||
6. UI框架相关类型
|
||||
|
||||
```typescript
|
||||
import type { } from 'naive-ui';
|
||||
```
|
||||
|
||||
7. 第三方依赖
|
||||
|
||||
```typescript
|
||||
import BScroll from 'bscroll';
|
||||
```
|
||||
|
||||
8. 第三方依赖相关类型
|
||||
|
||||
```typescript
|
||||
import type { } from 'bscroll';
|
||||
```
|
||||
|
||||
9. @/enum
|
||||
|
||||
```typescript
|
||||
import { } from '@/enum';
|
||||
```
|
||||
|
||||
10. @/setting
|
||||
|
||||
```typescript
|
||||
import { } from '@/setting';
|
||||
```
|
||||
|
||||
11. @/plugins
|
||||
|
||||
```typescript
|
||||
import { } from '@/plugins';
|
||||
```
|
||||
|
||||
12. @/layouts
|
||||
|
||||
```typescript
|
||||
import { } from '@/layouts';
|
||||
```
|
||||
|
||||
13. @/views
|
||||
|
||||
```typescript
|
||||
import { } from '@/views';
|
||||
```
|
||||
|
||||
14. @/components
|
||||
|
||||
```typescript
|
||||
import { } from '@/components';
|
||||
```
|
||||
|
||||
15. @/hooks
|
||||
|
||||
```typescript
|
||||
import { } from '@/hooks';
|
||||
```
|
||||
|
||||
16. @/store
|
||||
|
||||
```typescript
|
||||
import { } from '@/store';
|
||||
```
|
||||
|
||||
17. @/context
|
||||
|
||||
```typescript
|
||||
import { } from '@/context';
|
||||
```
|
||||
|
||||
18. @/router
|
||||
|
||||
```typescript
|
||||
import { } from '@/router';
|
||||
```
|
||||
|
||||
19. @/service
|
||||
|
||||
```typescript
|
||||
import { } from '@/service';
|
||||
```
|
||||
|
||||
20. @/utils
|
||||
|
||||
```typescript
|
||||
import { } from '@/utils';
|
||||
```
|
||||
|
||||
21. @/interface
|
||||
|
||||
```typescript
|
||||
import { } from '@/interface';
|
||||
```
|
||||
|
||||
22. @/assets
|
||||
|
||||
```typescript
|
||||
import { } from '@/assets';
|
||||
```
|
||||
|
||||
23. 相对路径依赖
|
||||
|
||||
```typescript
|
||||
import { } from './components';
|
||||
```
|
||||
|
||||
##### 二、TS类型声明
|
||||
|
||||
```typescript
|
||||
interface Props {
|
||||
/**姓名 */
|
||||
name: string;
|
||||
/**年龄 */
|
||||
age?: number;
|
||||
}
|
||||
interface Emits {
|
||||
/**
|
||||
* 删除事件
|
||||
* @param id - 删除项的id
|
||||
*/
|
||||
(e: 'delete', id: number): void;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
##### 三、defineProps、defineEmits、withDefaults
|
||||
|
||||
1. 定义属性，如：
|
||||
|
||||
```typescript
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
age: 24
|
||||
});
|
||||
```
|
||||
|
||||
其中name是必须的属性，age是可选属性，通过withDefaults添加默认值
|
||||
|
||||
2. 定义emit事件
|
||||
|
||||
```typescript
|
||||
const emit = defineEmits<Emits>();
|
||||
```
|
||||
|
||||
##### 四、响应式use函数
|
||||
|
||||
有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。
|
||||
|
||||
```typescript
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
```
|
||||
|
||||
```typescript
|
||||
/**dom引用 */
|
||||
const domRef = ref<HTMLElement | null>(null);
|
||||
const { height: domRefHeight } = useElementSize(domRef); //获取domRef的响应式高度
|
||||
```
|
||||
|
||||
|
||||
|
||||
##### 五、变量、函数声明
|
||||
|
||||
##### 六、vue生命周期函数、nextTick执行
|
||||
|
||||
##### 七、defineExpose
|
||||
59
doc/命名规范.md
59
doc/命名规范.md
@ -1,15 +1,28 @@
|
||||
### 驼峰式命名法：
|
||||
**Pascal Case大驼峰式命名法：**
|
||||
首字母大写。eg：StudentInfo、UserInfo、ProductInfo
|
||||
**Camel Case 小驼峰式命名法：**
|
||||
首字母小写。eg：studentInfo、userInfo、productInfo
|
||||
### 命名法：
|
||||
|
||||
#### 1.驼峰命名法(小驼峰)
|
||||
|
||||
**getUser**
|
||||
|
||||
#### 2.帕斯卡命名法(大驼峰)
|
||||
|
||||
**GlobalHeader**
|
||||
|
||||
#### 3.短横线命名法
|
||||
|
||||
**user-center**
|
||||
|
||||
#### 4.下划线命名法
|
||||
|
||||
**MAX_LENGTH**
|
||||
|
||||
### 文件、文件夹命名：
|
||||
1. 文件夹作为**页面**时用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
|
||||
2. 文件夹作为**组件**时用大写驼峰命名。
|
||||
3. 文件作为**组件**时用大写驼峰命名。
|
||||
4. 文件作为**use函数**时用小驼峰命名。
|
||||
5. 其余文件用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
|
||||
|
||||
1. 文件夹作为**路由页面**时用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔, 即**短横线命名法**，此时vue文件为**index.vue**。
|
||||
2. 文件夹作为**vue组件**时用**大写驼峰命名法**。
|
||||
3. 文件作为**vue组件**时用**大写驼峰命名法**。
|
||||
4. 文件作为**use函数**时用**小驼峰命名法**。
|
||||
5. 其余文件用**短横线命名法**。
|
||||
|
||||
### 变量命名：
|
||||
#### 命名方式 : 小驼峰式命名方法
|
||||
@ -23,15 +36,13 @@ is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个
|
||||
get | 获取某个值 | 函数返回一个非布尔值。
|
||||
set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象。
|
||||
|
||||
- 推荐：
|
||||
|
||||
```javascript
|
||||
//是否可读
|
||||
/** 是否可读 */
|
||||
function canRead(){
|
||||
return true;
|
||||
}
|
||||
|
||||
//获取姓名
|
||||
/** 获取姓名 */
|
||||
function getName(){
|
||||
return this.name;
|
||||
}
|
||||
@ -39,17 +50,23 @@ function getName(){
|
||||
|
||||
|
||||
### 常量
|
||||
#### 命名方法 : 全部大写
|
||||
**命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。**
|
||||
- 推荐：
|
||||
|
||||
#### 命名方法 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
|
||||
```javascript
|
||||
const MAX_COUNT = 10;
|
||||
const URL = 'http://www.baidu.com';
|
||||
```
|
||||
|
||||
### TS类型
|
||||
### TS类型接口interface和type
|
||||
|
||||
命名统一使用大写驼峰
|
||||
##### 命名方法：大写驼峰
|
||||
|
||||
interface和type使用优先级：能用interface表示的类型就用interface。
|
||||
```typescript
|
||||
interface PersonInfo {
|
||||
/**姓名 */
|
||||
name: string;
|
||||
/**性别 '0':男; '1': 女; '2': 未知 */
|
||||
gender: '0' | '1' | '2';
|
||||
/**年龄 */
|
||||
age: 25;
|
||||
}
|
||||
```
|
||||
|
||||
101
doc/目录.md
Normal file
101
doc/目录.md
Normal file
@ -0,0 +1,101 @@
|
||||
|
||||
## 目录规范
|
||||
|
||||
```javascript
|
||||
qitan-pc
|
||||
├── build //vite构建相关配置和插件
|
||||
│ ├── define //定义的全局常量，通过vite构建时注入
|
||||
│ ├── env //.env环境文件内容加载插件
|
||||
│ └── plugins //构建插件
|
||||
│ ├── html.ts //html插件(注入变量，压缩代码等)
|
||||
│ ├── iconify.ts //iconify图标插件
|
||||
│ ├── visualizer.ts //构建的依赖大小占比分析插件
|
||||
│ ├── vue.ts //vue相关vite插件
|
||||
│ └── windicss.ts //css框架插件
|
||||
├── doc //项目相关说明文档
|
||||
├── public //公共目录
|
||||
│ ├── resource //资源文件夹(不会被打包)
|
||||
│ └── favicon.ico //网站标签图标
|
||||
├── src
|
||||
│ ├── assets //静态资源
|
||||
│ ├── components //全局组件
|
||||
│ │ ├── business //业务相关组件
|
||||
│ │ ├── common //公共组件
|
||||
│ │ └── custom //自定义组件
|
||||
│ ├── context //全局上下文(通过provide和inject实现)
|
||||
│ │ ├── app //从app.vue注入的上下文
|
||||
│ │ └── part //局部组件注入的上下文
|
||||
│ ├── enum //TS枚举
|
||||
│ │ ├── animate.ts //动画枚举
|
||||
│ │ ├── business.ts //业务相关枚举
|
||||
│ │ ├── common.ts //通用枚举
|
||||
│ │ ├── route.ts //路由相关枚举
|
||||
│ │ ├── storage.ts //存储相关枚举
|
||||
│ │ └── theme.ts //系统主题配置相关枚举
|
||||
│ ├── hooks //组合式的钩子函数hooks
|
||||
│ │ ├── business //业务相关hooks
|
||||
│ │ └── common //通用hooks
|
||||
│ ├── interface //TS类型接口
|
||||
│ │ ├── business.ts //业务相关类型接口
|
||||
│ │ ├── common.ts //通用类型接口
|
||||
│ │ └── theme.ts //系统主题配置相关类型接口
|
||||
│ ├── layouts //布局组件
|
||||
│ │ ├── BasicLayout //基本布局(包含全局头部、侧边栏、底部等公共部分)
|
||||
│ │ ├── BlankLayout //空白布局组件(单个页面)
|
||||
│ │ └── RouterViewLayout //路由组件(用于多级路由之间的桥接)
|
||||
│ ├── plugins //插件
|
||||
│ │ └── dark-mode.ts //windicss暗黑模式插件
|
||||
│ ├── router //vue路由
|
||||
│ │ ├── modules //路由页面(按模块划分)
|
||||
│ │ ├── permission //路由权限(路由守卫)
|
||||
│ │ ├── routes //声明的路由
|
||||
│ │ └── setup //路由挂载函数
|
||||
│ ├── service //网络请求
|
||||
│ │ ├── api //接口api
|
||||
│ │ ├── middleware //请求结果的处理中间件
|
||||
│ │ └── request //封装的请求函数
|
||||
│ ├── settings //项目初始配置
|
||||
│ │ └── theme.ts //项目主题初始配置
|
||||
│ ├── store //状态管理
|
||||
│ │ └── modules //状态管理划分的模块
|
||||
│ ├── styles //样式
|
||||
│ │ ├── css //css
|
||||
│ │ └── scss //scss
|
||||
│ ├── typings //TS类型声明文件(*.d.ts)
|
||||
│ ├── utils //全局工具函数
|
||||
│ │ ├── auth //用户鉴权
|
||||
│ │ ├── common //通用工具函数
|
||||
│ │ ├── package //npm依赖
|
||||
│ │ ├── router //路由
|
||||
│ │ ├── request //请求工具函数
|
||||
│ │ └── storage //存储
|
||||
│ ├── views //页面
|
||||
│ │ ├── about
|
||||
│ │ ├── component
|
||||
│ │ ├── dashboard
|
||||
│ │ ├── document
|
||||
│ │ ├── multi-menu
|
||||
│ │ └── system //系统内置页面：登录、异常页等
|
||||
│ ├── App.vue //vue文件入口
|
||||
│ ├── AppProvider.vue //配置naive UI的vue文件(国际化,loadingBar、message等组件)
|
||||
│ └── main.ts //项目入口ts文件
|
||||
├── .cz-config.js //git cz提交配置
|
||||
├── .editorconfig //统一编辑器配置
|
||||
├── .env //环境文件
|
||||
├── .env.development //环境文件(开发模式)
|
||||
├── .env.production //环境文件(生产模式)
|
||||
├── .env.staging //环境文件(自定义staging模式)
|
||||
├── .eslintignore //忽略eslint检查的配置文件
|
||||
├── .eslintrc.js //eslint配置文件
|
||||
├── .gitignore //忽略git提交的配置文件
|
||||
├── .husky //git commit提交钩子，提交前检查代码格式和提交commit内容的格式
|
||||
├── .prettierrc.js //prettier代码格式插件配置
|
||||
├── commitlint.config.js //commitlint提交规范插件配置
|
||||
├── index.html
|
||||
├── package.json //npm依赖描述文件
|
||||
├── pnpm-lock.yaml //npm包管理器pnpm依赖锁定文件
|
||||
├── README.md //项目介绍文档
|
||||
├── tsconfig.json //TS配置
|
||||
├── vite.config.ts //vite配置
|
||||
└── windi.config.ts //windicss框架配置
|
||||
```
|
||||
Reference in New Issue
Block a user