docs(projects): update README.md

This commit is contained in:
Soybean 2021-11-24 00:46:58 +08:00
parent 6261156c5a
commit 54577f10fc
11 changed files with 31 additions and 509 deletions

View File

@ -54,7 +54,7 @@ Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的免费中
## 文档
[项目相关文档](./doc)
[项目文档](https://docs.soybean.pro)
## 安装使用
@ -102,9 +102,10 @@ pnpm i -g commitizen
支持现代浏览器, 不支持 IE
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt="IE" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Safari |
| :-: | :-: | :-: | :-: | :-: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 开源作者
[@Soybean](https://github.com/honghuangdc)
@ -119,7 +120,7 @@ pnpm i -g commitizen
<img src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG" style="width:200px" />
</div>
- 本人微信号honghuangdc欢迎来技术交流。

View File

@ -1,47 +0,0 @@
### 1.interface和type
##### interface和type使用优先级能用interface表示的类型就用interface。
### 2.请求函数
#### api接口
统一以 **fetch** 开头,例如:
```typescript
/**
* 获取用户信息
* @param id - 用户唯一标识id
*/
function fetchUserInfo(idstring) {
// ***
}
/**
* 删除列表项
* @param id - 列表id
*/
function fetchDeleteListItem(idstring) {
// ***
}
```
#### middleware中间件
统一以 **handle** 开头,例如
```typescript
/**接口返回的用户信息 */
interface ResponseUserInfo {
userId: string;
userName: string;
userAge: number;
}
/**
* 获取用户信息 中间件
@param data - 返回的用户信息
*/
function handleUserInfo(data: ResponseUserInfo): UserInfo {
// ***
}
```

View File

@ -1,35 +0,0 @@
### 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`
#### class类名的顺序
1. 自定义的class类名(遵循BEM命名法)
2. css插件提供的类名按照以上的css属性对应的顺序
例如自定义类名结合tailwind css
<div class="demo-container absolute flex justify-center items-center left-10px top-12px overflow-hidden wh-full p-10px border-1px border-[#f00] m-24px bg-[#fff] text-32px text-[#0f0]"></div>
<style>
.demo-container {
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}
</style>

View File

@ -1,41 +0,0 @@
### iconify用法
#### 一、静态用法:直接用图标的组件名称
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" />`
*psIcon组件属性 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*

View File

@ -1,209 +0,0 @@
### 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

View File

@ -1,72 +0,0 @@
### 命名法:
#### 1.驼峰命名法(小驼峰)
**getUser**
#### 2.帕斯卡命名法(大驼峰)
**GlobalHeader**
#### 3.短横线命名法
**user-center**
#### 4.下划线命名法
**MAX_LENGTH**
### 文件、文件夹命名:
1. 文件夹作为**路由页面**时用小写字母,包含多个单词时,单词之间建议使用半角的连词线 ( - ) 分隔, 即**短横线命名法**此时vue文件为**index.vue**。
2. 文件夹作为**vue组件**时用**大写驼峰命名法**。
3. 文件作为**vue组件**时用**大写驼峰命名法**。
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
##### 命名方法:大写驼峰
```typescript
interface PersonInfo {
/**姓名 */
name: string;
/**性别 '0':男; '1': 女; '2': 未知 */
gender: '0' | '1' | '2';
/**年龄 */
age: 25;
}
```

View File

@ -1,101 +0,0 @@
## 目录规范
```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框架配置
```

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 158.9 158.9" style="enable-background:new 0 0 158.9 158.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#409EFF;}
</style>
<path class="st0" d="M0,158.9C0,106.3,0,53.7,0,1.1C0,0.2,0.2,0,1.1,0c52.2,0,104.5,0,156.7,0c0.9,0,1.1,0.2,1.1,1.1
c0,52.2,0,104.5,0,156.7c0,0.9-0.2,1.1-1.1,1.1C105.2,158.8,52.6,158.8,0,158.9z"/>
<path class="st1" d="M81.3,55.9c-0.1-11.7-2.9-22.5-9.4-32.4c-1-1.5-2.1-2.9-2.5-4.7c-0.7-3.4,0.9-6.9,4-8.6c3-1.7,6.8-1.2,9.3,1.2
c2.4,2.6,4.4,5.6,5.9,8.8c4.7,8.9,7.6,18.6,8.4,28.6c1,12.5-0.7,25-5.2,36.7c-0.9,2.5-1.9,4.9-3,7.3c-0.3,0.4-0.3,1,0,1.4
c9.6,13.3,21.8,23,37.8,27.2c6.4,1.7,13.1,2.3,19.7,1.6c4.2-0.4,7.9,2.7,8.4,6.9c0.7,4.3-2.3,8.3-6.6,9c0,0,0,0-0.1,0
c-7.7,0.9-15.5,0.5-23-1.3c-13.9-3.1-26.7-10-36.9-19.9c-4.4-4.2-8.4-8.8-11.9-13.7c-0.5-0.8-1.4-1.2-2.3-1.1
c-9.5,0.7-18.8,3.3-27.4,7.6c-11.6,6-20.7,14.6-26.4,26.4c-0.7,1.9-2,3.5-3.7,4.7c-2.9,1.7-6.6,1.5-9.2-0.7c-2.8-2.2-3.8-6-2.4-9.3
c2.2-5.2,5.1-10.1,8.7-14.5c12.2-15.4,28.2-24.6,47.3-28.6c4-0.8,8.1-1.4,12.2-1.6c0.5,0,1-0.3,1.2-0.8c3.3-7.1,5.5-14.6,6.5-22.3
C81.1,61.2,81.3,58.6,81.3,55.9z"/>
<path class="st1" d="M136.3,108.3c-3.8-0.5-7.6-1.4-11.1-2.9c-7.7-2.8-14.4-7.5-19.7-13.8c-2.9-3.3-2.5-8.4,0.8-11.3
c1.4-1.2,3.1-1.9,4.9-1.9c2.5-0.1,5,1,6.5,2.9c4.9,5.6,11.6,9.4,18.9,10.8c1.5,0.2,3.1,0.6,4.5,1.2c3.2,1.8,4.8,5.6,3.8,9.2
C144,106.1,140.8,108.4,136.3,108.3z"/>
<path class="st1" d="M55.7,33.3c3,0.2,5.6,2.2,6.6,5c2.2,5.4,3.4,11.2,3.6,17c0.3,5.9-0.6,11.7-2.5,17.3c-2,5.8-8.2,7.8-12.9,4.2
c-2.6-2.2-3.6-5.8-2.4-9c1.4-4,1.9-8.2,1.7-12.4c-0.2-3.8-1-7.5-2.4-11C45.3,38.9,49.2,33.3,55.7,33.3z"/>
<path class="st1" d="M77.9,126.6c0,3.9-2.8,7.2-6.7,7.9c-7.8,1.5-14.8,5.9-19.7,12.2c-2.7,3.5-7.6,4.2-11.2,1.6
c-3.6-2.6-4.3-7.6-1.7-11.2c0.1-0.1,0.2-0.3,0.3-0.4c4.1-5.2,9.3-9.6,15.1-12.8c4.4-2.5,9.1-4.2,14-5.1
C73.3,117.7,77.9,121.3,77.9,126.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1,3 +1,4 @@
export * from './theme';
export * from './system';
export * from './route';
export * from './service';

View File

@ -1,3 +1,2 @@
export * from './common';
export * from './business';
export * from './theme';