diff --git a/README.md b/README.md index 1ee6a2e3..ab394ae5 100644 --- a/README.md +++ b/README.md @@ -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框架配置 ``` diff --git a/doc/css书写规范.md b/doc/css书写规范.md index 92a26564..7cb44abd 100644 --- a/doc/css书写规范.md +++ b/doc/css书写规范.md @@ -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 diff --git a/doc/iconify使用文档.md b/doc/iconify使用文档.md index 144e412e..aa6820ee 100644 --- a/doc/iconify使用文档.md +++ b/doc/iconify使用文档.md @@ -1,24 +1,38 @@ -iconify用法 +### iconify用法 -一、静态用法:直接用图标的组件名称 -1.安装vscode智能提示的插件: Iconify IntelliSense -2.找图标:网址 https://icones.js.org/ 或者 vscode安装 icones插件 -3.确定图标名字:找到图标后复制名字 如:'mdi:emoticon' 组件为: -4.设置样式:同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小 +#### 一、静态用法:直接用图标的组件名称 + +1. 安装vscode智能提示的插件: Iconify IntelliSense +2. 找图标:网址 https://icones.js.org/ 或者 vscode安装 icones插件 +3. 确定图标名字:找到图标后复制名字 如:**'mdi:emoticon'** 组件为: ``, icon-为设置的前缀 +4. 设置样式:同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小 + +#### 二、多个图标动态渲染 -二、多个图标动态渲染 1.确定图标名字,如:'mdi:emoticon' 2.引入Icon组件: -import { Icon } from '@iconify/vue'; -3.动态渲染 -ps:Icon组件属性 https://docs.iconify.design/icon-components/vue/ +`import { Icon } from '@iconify/vue';` +3.动态渲染 + +`` + +*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 diff --git a/doc/vue+TS书写规范.md b/doc/vue+TS书写规范.md index 41ce6094..fd7a2208 100644 --- a/doc/vue+TS书写规范.md +++ b/doc/vue+TS书写规范.md @@ -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(), {` + +​ `age: 24` + +`})` + +其中name是必须的属性,age是可选属性,通过withDefaults添加默认值 + +2. 定义emit事件 + +`const emit = defineEmits<{` + +​ `(e: 'event-name', param: number): void;` + +`}>()` + +##### 四、响应式use函数 + +有些use函数需要传入响应式的变量参数时,则书写在声明的变量下面。 + +##### 五、变量、函数声明 + +##### 六、vue生命周期函数、nextTick执行 diff --git a/doc/命名规范.md b/doc/命名规范.md new file mode 100644 index 00000000..e74f48a6 --- /dev/null +++ b/doc/命名规范.md @@ -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。 diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts index a27097d3..3b580e65 100644 --- a/src/router/modules/index.ts +++ b/src/router/modules/index.ts @@ -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]; diff --git a/src/router/modules/multiMenu.ts b/src/router/modules/multi-menu.ts similarity index 100% rename from src/router/modules/multiMenu.ts rename to src/router/modules/multi-menu.ts