GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(projects): 文档更新

Browse Source
This commit is contained in:
Soybean 2021-11-08 06:10:49 +08:00
parent cd6db3d491
commit 8d2ba3e576
7 changed files with 189 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
README.md
View File

@ -28,25 +28,22 @@ Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的中后台
## 目录规范
```
```javascript
soybean-admin
├── README.md //项目说明文档
├── build //vite构建相关配置和插件
│ ├── define //定义的全局常量，通过vite构建时注入
│ ├── env //.env环境文件内容加载插件
│ └── plugins //构建插件
│ ├── html.ts //html插件(注入变量，压缩代码等)
│ ├── iconify.ts //iconify图标插件
│ └── vue.ts //vue相关vite插件
├── commitlint.config.js //commitlint提交规范插件配置
├── index.html
├── package.json
├── pnpm-lock.yaml //npm包管理器pnpm依赖锁定文件
│ ├── visualizer.ts //构建的依赖大小占比分析插件
│ ├── vue.ts //vue相关vite插件
│ └── windicss.ts //css框架插件
├── doc //项目相关说明文档
├── public //公共目录
│ ├── resource //资源文件夹(不会被打包)
│ └── favicon.ico
├── src
│ ├── App.vue //vue文件入口
│ ├── AppProvider.vue //配置naive UI的vue文件(国际化,loadingBar、message等组件)
│ ├── assets //静态资源
│ ├── components //全局组件
│ │ ├── business //业务相关组件
@ -72,7 +69,6 @@ soybean-admin
│ ├── layouts //布局组件
│ │ ├── BasicLayout //基本布局组件(包含全局头部、侧边栏、底部等)
│ │ └── BlankLayout //空白布局组件
│ ├── main.ts //项目入口ts文件
│ ├── plugins //插件
│ │ └── dark-mode.ts //windicss暗黑模式插件
│ ├── router //vue路由
@ -96,22 +92,36 @@ soybean-admin
│ ├── utils //全局工具函数
│ │ ├── auth
│ │ ├── common
│ │ ├── package
│ │ ├── router
│ │ └── storage
│ └── views //页面
│ ├── dashboard
│ └── system
├── tsconfig.json //TS配置
├── vite.config.ts //vite配置
├── windi.config.ts //windicss框架配置
│ ├── 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模式)
├── .env.staging //环境文件(自定义staging模式)
├── .eslintignore //忽略eslint检查的配置文件
├── .eslintrc.js //eslint配置文件
├── .gitignore //忽略git提交的配置文件
├── .husky //git commit提交钩子，提交前检查代码格式和提交commit内容的格式
└── .prettierrc.js //prettier代码格式插件配置
├── .prettierrc.js //prettier代码格式插件配置
├── commitlint.config.js //commitlint提交规范插件配置
├── index.html
├── package.json
├── pnpm-lock.yaml //npm包管理器pnpm依赖锁定文件
├── README.md //项目介绍文档
├── tsconfig.json //TS配置
├── vite.config.ts //vite配置
└── windi.config.ts //windicss框架配置
```

19
doc/css书写规范.md
View File

@ -1,14 +1,15 @@
css书写顺序
### css书写顺序
1.定位属性：position display float left top right bottom overflow clear z-index
2.自身属性：width height padding border margin background
3.文字样式：font-family font-size font-style font-weight font-varient color
4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5.css3中新增属性：content box-shadow border-radius transform……
`1.定位属性：position display float left top right bottom overflow clear z-index`
`2.自身属性：width height padding border margin background`
`3.文字样式：font-family font-size font-style font-weight font-varient color`
`4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow`
`5.css3中新增属性：content box-shadow border-radius transform`
class类名的顺序：
1.自定义的class类名(遵循BEM命名法)
2.css插件提供的类名按照以上的css属性对应的顺序
#### class类名的顺序：
1. 自定义的class类名(遵循BEM命名法)
2. css插件提供的类名按照以上的css属性对应的顺序
例如：自定义类名结合tailwind css

52
doc/iconify使用文档.md
View File

@ -1,24 +1,38 @@
iconify用法
### iconify用法
一、静态用法：直接用图标的组件名称
1.安装vscode智能提示的插件: Iconify IntelliSense
2.找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
3.确定图标名字：找到图标后复制名字 如：'mdi:emoticon' 组件为: <icon-mdi:emoticon />
4.设置样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
#### 一、静态用法：直接用图标的组件名称
1. 安装vscode智能提示的插件: Iconify IntelliSense
2. 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
3. 确定图标名字：找到图标后复制名字 如：**'mdi:emoticon'** 组件为: `<icon-mdi:emoticon />`, icon-为设置的前缀
4. 设置样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
#### 二、多个图标动态渲染
二、多个图标动态渲染
1.确定图标名字，如：'mdi:emoticon'
2.引入Icon组件：
import { Icon } from '@iconify/vue';
3.动态渲染 <Icon icon="mdi:emoticon" />
ps：Icon组件属性 https://docs.iconify.design/icon-components/vue/
`import { Icon } from '@iconify/vue';`
3.动态渲染
`<Icon icon="mdi:emoticon" />`
*ps：Icon组件属性 https://docs.iconify.design/icon-components/vue/*
#### 三、结合naiveUI组件动态渲染
1. 确定图标名字，如：**'mdi:emoticon'**
2. 引入vue的h函数：
`import { h } from 'vue';`
3. 引入Icon组件
`import { Icon } from '@iconify/vue';`
4. 动态渲染
`() => h(Icon, { icon: 'mdi:emoticon', style: { color: '#f00', fontSize: '16px' } })`
*ps：@/uitls已封装好了函数：iconifyRender*
三、结合naiveUI组件动态渲染
1.确定图标名字，如：'mdi:emoticon'
2.引入vue的h函数：
import { h } from 'vue';
3.引入Icon组件
import { Icon } from '@iconify/vue';
4.动态渲染
() => h(Icon, { icon: 'mdi:emoticon', style: { color: '#f00', fontSize: '16px' } })
ps：@/uitls已封装好了函数：iconifyRender

94
doc/vue+TS书写规范.md
View File

@ -1,43 +1,73 @@
推荐script-setup写法
### script-setup写法
#### 第一部分书写
第一部分书写
template
第二部分
#### 第二部分
script
一、import的顺序
##### 一、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.相对路径依赖
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类型声明
##### 二、TS类型声明
三、defineProps、defineEmits、defineExpose、withDefaults
##### 三、defineProps、defineEmits、defineExpose、withDefaults
四、响应式use函数
1. 定义属性，如：
五、变量、函数声明
`interface Props {`
六、vue生命周期函数、nextTick执行
​ `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执行

55
doc/命名规范.md Normal file
View File

@ -0,0 +1,55 @@
### 驼峰式命名法：
**Pascal Case大驼峰式命名法：**
首字母大写。eg：StudentInfo、UserInfo、ProductInfo
**Camel Case 小驼峰式命名法：**
首字母小写。eg：studentInfo、userInfo、productInfo
### 文件、文件夹命名：
1. 文件夹作为**页面**时用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
2. 文件夹作为**组件**时用大写驼峰命名。
3. 文件作为**组件**时用大写驼峰命名。
4. 文件作为**use函数**时用小驼峰命名。
5. 其余文件用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
### 变量命名：
#### 命名方式 : 小驼峰式命名方法
**命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词**
动词 | 含义 | 返回值
---|---|---
can | 判断是否可执行某个动作 | 函数返回一个布尔值。true：可执行；false：不可执行。
has | 判断是否含有某个值 | 函数返回一个布尔值。true：含有此值；false：不含有此值。
is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个值；false：不为某个值。
get | 获取某个值 | 函数返回一个非布尔值。
set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象。
- 推荐：
```javascript
//是否可读
function canRead(){
return true;
}
//获取姓名
function getName(){
return this.name;
}
```
### 常量
#### 命名方法 : 全部大写
**命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。**
- 推荐：
```javascript
const MAX_COUNT = 10;
const URL = 'http://www.baidu.com';
```
### TS类型
命名统一使用大写驼峰
interface和type使用优先级：能用interface表示的类型就用interface。

2
src/router/modules/index.ts
View File

@ -3,7 +3,7 @@ import DASHBOARD from './dashboard';
import DOCUMENT from './document';
import COMPONENT from './component';
import EXCEPTION from './exception';
import MULTI_MENU from './multiMenu';
import MULTI_MENU from './multi-menu';
import ABOUT from './about';
export default [ROOT, DASHBOARD, DOCUMENT, COMPONENT, EXCEPTION, MULTI_MENU, ABOUT];

0
src/router/modules/multiMenu.ts → src/router/modules/multi-menu.ts
View File