--- theme: seriph background: https://source.unsplash.com/collection/94734566/1920x1080 highlighter: shiki lineNumbers: true transition: slide-left mdc: true --- # Fast Iot Web 工业互联网前端开源平台模版介绍 --- layout: center --- # 1. 模版基础 --- layout: image-right image: /vben.png backgroundSize: contain --- # 模版介绍 <a href='https://gitee.com/yudaocode/yudao-ui-admin-vben'>yudao-ui-admin-vben</a> <carbon-direction-straight-right /> <a href='https://github.com/vbenjs/vue-vben-admin'>vue-vben-admin</a> Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的 vue3、vite4、TypeScript 等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。 - 最新技术栈: 使用 Vue3/vite2 等前端前沿技术开发 - TypeScript: 应用程序级 JavaScript 的语言 - 主题: 可配置的主题 - 国际化: 内置完善的国际化方案 - 权限: 内置完善的动态路由权限生成方案 - 组件: 二次封装了多个常用的组件 <!-- 1. Vben 在 Vue3 刚推出时就出现了,一直迭代至今,目前最新版本是 v2.10.0, 而 yudao-ui-admin-vben fork 了 Vben, 大约是在 v.2.7.0 版本之前,所以目前的模版是基于 Vben 的,但是有一定的差距,其次 Vben 原维护者已经停止维护,目前由社区人员维护,目前有点过重了 --> --- layout: image-right image: /fast-iot-web.png backgroundSize: contain --- # 模版技术栈 <div><a href='http://223.99.228.240:33000/liukai/fast-iot-web'><carbon:logo-github /> Fast iot web</a></div> <br/> - vue@3.3.8 -> 最新 vue@3.4.19 - vite@4.5.1 -> 最新 vite@5.1.4 - ant-design-vue@4.0.8 -> 最新 ant-design-vue@4.1.2 - typescript@5.3.3 - unocss@0.58.3 - @antfu/eslint-config@2.6.2 - node>=18.12.0 - pnpm>=8.10.0 <!-- 1. 目前仓库在 gitea,还没有放在 git 或 gitee 上 2. vite 为什么不用最新版?后面会提及,这里暂时不介绍,vue、ant-design-vue 不用最新版的原因是 Slot 插槽 TS 类型有问题 3. 强制 TS 类型安全,在提交时会执行 type:check 4. 没有 prettier,只需用 Eslint(因为个人原因,antfu 生态) 5. 这里主要列举了一些核心包,其他包看下 package.json 6. 目前仓库 git 提交比较混乱,因为改动较大,最后会整合一下 git 提交记录 7. 强制使用 pnpm,基于 npx only-allow pnpm 这个命令 --> --- layout: image-right image: /command.png backgroundSize: contain --- # 项目命令 <br /> - dev -> 开发环境 - build -> 构建生产环境 - type:check -> 执行 TS 检查 - lint -> 执行 Eslint 检查 - changelog -> 生成版本日志 - release -> 版本发布 <!-- 1. changelog: 基于约定式提交规范生成版本日志 (git 提交记录要更细) 2. release: 集成了一个第三方库 bumpp ,自动发布版本,包含:修改版本号、执行 changelog 命令、创建版本提交记录、创建 Tag、推送提交记录和 Tag 到 Git 仓库,一般来说发版时直接执行 release 就可以了 3. 后面有文章介绍这两个命令的集成 4. 顺便讨论一个 Git 工作流的应用,git rebase + marge(fast forward) 与 git rebase + git merge --squash (/skwɒʃ/) --> --- layout: image-right image: /dir.png backgroundSize: contain --- # 项目目录 - /build -> 构建项目代码,例如:vite config、plugin - /api -> 后端请求交互 ```plain |-- user -- index.ts -- types.ts ``` - /views -> 页面 ```plain{1,2,3,4} |-- user -- index.vue -- data.ts -- UserFormModal.vue -- ?form.vue ``` <!-- 1. 多语言支持,但是没有怎么去使用 2. css 使用 unocss 3. 下面的 types 目录是公共的类型 4. data.ts 用法后面介绍 5. components 目录下存放的是公共组件(与业务无关),如果是与业务有关的公共组件,可以新建 /views/components 6. 如果新建、编辑、详情是页面的话,可以增加 form.vue / detail.vue 小写开头的 .vue 文件(或者有更好的命名方式?) --> --- # 菜单路由 路由使用的 `BACK` (后端路由模式),移除了 `ROLE` (角色权限) 和 `ROUTE_MAPPING` (路由映射) 两种模式。 新增路由在 系统管理 -> 菜单管理 页面动态增加: <div flex='~ gap-10px items-center' class='gap-[10px]'> <img src='/menu-1.png' class='flex-1 w-0 shadow-lg'/> <img src='/menu-2.png' class='flex-1 w-0 shadow-lg'/> <img src='/menu-3.png' class='flex-1 w-0 shadow-lg'/> </div> <!-- 1. 路由路径和组件路径一般是相同的 2. 当开启 keep-alive 时,组件名称是必须且唯一 3. 是否在菜单栏显示,用于添加不再菜单栏展示的页面(如:新增、编辑、详情或其他) 4. 路由遵从嵌套路由规则 5. 所有子路由默认都会转为二级路由,所以不能存在二层以上的内嵌路由 --> --- # 按钮权限 项目中存在三种权限判断方式,分别为: 1. 函数 2. 组件 3. 指令 ```ts{1|3-5|7} <button v-if="hasPermission(codes)">Create</button> <Authority :value="codes"> <button>Create</button> </Authority> <button v-auth="codes">Create</button> ``` 推荐使用函数方式 --- layout: center --- # 2. 常用组件介绍 --- # BasicTable ```ts{2|3|4,7-11|12-14|5,19-23} <script setup lang='ts'> import { BasicTable, TableAction, useTable } from '@/components/Table' import { columns, searchFormSchema } from './data' import { getUserList } from '@/api/user' import type { SystemUser } from '@/api/user/types' const [registerTable, { reload }] = useTable({ api(params) { return getUserList({ ...params, deptId: selectionDept.value }) }, columns, formConfig: { schemas: searchFormSchema, }, }) </script> <template> <BasicTable :api="async () => ([] as SystemUser[])" @register="registerTable"> <template #bodyCell="{ record }"> ... </template> </BasicTable> </template> ``` <!-- 1. 使用 hooks 方式 2. useTable 支持泛型,但不用手动传递,会根据 api 的返回值自动推断 3. Vue 泛型组件不能传递泛型,只能通过 Props 推断,但是我们使用 useTable 时,使用 register 传递的 props,所以就无法推断出来了 (这样可以获取到 slot 泛型支持) 4. 更多的使用,参考 Vben 和 ant-design Table 文档 --> --- # BasicForm ```ts{2-3|5-11|15} <script setup lang='ts'> import { BasicForm, useForm } from '@/components/Form' import { formSchema } from './data' const [registerForm, { setFieldsValue, validate }] = useForm({ labelWidth: 120, baseColProps: { span: 24 }, schemas: formSchema, showActionButtonGroup: false, actionColOptions: { span: 23 }, }) </script> <template> <BasicForm @register="registerForm" /> </template> ``` <!-- 1. 使用 hooks 方式 2. 目前 useForm 不支持泛型 (之前没加,但是加上最好,谁有兴趣的话可以做一下) --> --- # BasicModal BasicModal 用法使用两个 `Hook` 实现,`useModal` 和 `useModalInner` useModal ```ts{2,3|5,9|none} <script setup lang='ts'> import { useModal } from '@/components/Modal' import UserFormModal from './UserFormModal.vue' const [registerModal, { openModal }] = useModal<string>() </script> <template> <UserFormModal @register="registerModal" /> </template> ``` <!-- 1. useModal 在父组件中使用 (如:user.vue) 2. useModal 支持泛型,可以约束 openModal 函数调用参数类型 --> --- # BasicModal useInnerModal ```ts{2|4-6|10} <script setup lang='ts'> import { BasicModal, useModalInner } from '@/components/Modal' const [registerModal] = useModalInner(async (id: string) => { ... }) </script> <template> <BasicModal v-bind="$attrs" @register="registerModal" /> </template> ``` <br/> <v-click> ```ts const [ModalComponent, { openModal }] = useModal(Component) const { openModal } = useModal(Component) openModal(state) ``` </v-click> <!-- 1. $attrs 是必须的,它会将父组件的 register 传递下去 2. 这种用法怎么样(探讨 Modal 新形势) --> --- # Icon 移除了之前的 `<Icon />` 组件,使用 unocss presetIcon 代替, 图标集:<a href='https://icones.js.org/' target='__blank'>Icones</a> ```html <span class='i-ant-design:edit-outlined'></span> ``` 项目集成了 Icones 中所有的图标集,但下面这些会更常用: - Ant Design Icons - IonIcons - Material Design Icons - Carbon <br/> VsCode Plugins: - UnoCSS - Iconify IntelliSense <!-- 1. Icon 是按需引入的(除了 Ant Design Icons) 2. 项目引入了 Ant Design Icons 所有的图标,用于 IconPicker 组件 3. 其他的组件查看代码或者 Vben 文档 --> --- layout: center --- # 3. 其他 --- # 项目规范 项目使用 git hooks 强制约束代码规范与提交规范: 1. 使用 Eslint,不使用 Prettier 2. 项目用一个简单的正则来约束 CommitLint ```ts const commitRE = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/ ``` 3. 移除了 Stylelint 4. 使用 `type:check` 校验 TS 类型正确性 (执行时间会稍微有点长) --- layout: image-right image: https://source.unsplash.com/collection/94734565/1920x1080 --- # 开源分享 - [ ] GitHub CICD 流程介绍 - [ ] Git 提交规范与 changelog 生成 - [ ] BasicForm TS 类型优化 - [ ] BasicTable 与 UseTable 泛型支持 - [ ] 更多 <br> <br> <br> <a href='https://www.yuque.com/g/yuqueyonghurkd3lk/lfm6ik/collaborator/join?token=QlhaZiT6IAREiGWC&source=book_collaborator# 邀请你共同编辑知识库《开源知识点总结》' target='__blank'> 语雀 - 开源知识点总结 </a> --- # 下一步需要做的 1. 升级 Vue、Ant-design 版本 (等待 ant-design 更新) 2. 解决循序引用问题(复杂度较高) 3. 树形 Table 不支持异步加载 4. BasicTree 组件异步加载不生效(BUG) 5. 重复组件问题(BasicTree / ApiTree) 6. 完善系统管理、新增产品、设备、监控页面 7. 样式调整? <!-- 1. 目前 Table 异步加载,依靠 onExpand 事件实现 2. PR 提交,与 review -->