vue3-admin-template
我的项目地址:vue3-admin-template
能拿来间接开发我的项目,不须要思考格式化配置、打包编译优化等等,难道它不香吗?~~
此我的项目是集成vue3 + vite + Element-Plus + Pinia + vue-router的后盾管理系统的模板工程。
即开即用,提供初创团队或新我的项目专一于疾速启动和开发交易。不再思考脚手架编译打包和优化、ESLlint对立配置、我的项目和编码标准等问题。
参考、借鉴vue-element-admin我的项目。
在线预览代码
在线预览页面
在关上vscode时依据提醒装置上举荐插件。
内容(Content)
蕴含以下内容:
- 权限治理模块
定义后盾人员、角色、角色权限三个模块和mock数据。 - vite脚手架
解决了vite脚手架存在的一些问题。vite的默认打包配置已做优化。 - vue-router
- store存储 - pinia
配置举荐插件
.vscode/extensions.json中配置了举荐插件,在关上vscode时依据提醒装置上举荐插件即可。比方:- vue-volar-extention-pack -- vue3插件全家桶
- eamodio.gitlens -- git记录查看工具
- gruntfuggly.todo-tree --查看TODO事项
- lihuiwang.vue-alias-skip --别名门路能够点击疾速跳转查看
- 提供插件形式
router、store、plugins、directive目录可间接创立文件,主动动静引入加载。 - 引入auto-import机制
引入unplugin-auto-import/vite插件,可主动引入加载组件和vue、vue-router的API - ESLint + Prettier配置
- 辨别环境变量与配置
辨别dev调试环境、dev的build构建环境、test构建环境、生产构建环境。 - 反对TypeScript开发
api接口的参数params倡议都要定义参数对象属性和类型 - libs工具库
提供了倒计时、数据查看器、加密器、存储器、类型查看器等
组件(Components)
- 具备SvgIcon组件
门路:components/SvgIcon/index.vue
能够应用SvgIcon展现svg格局的ICON。
应用svg做icon优于font icon。 - 列表页面组件
门路:common/ListPage.vue
通过config.ts配置疾速创建表格页面的疾速开发,同时也标准对立了表格页面的组件布局和组件款式,可参考views/admin/user/index.vue
若差异化较大列表页面,可参考"common/ListPage.vue"页面复制后重写。 - 信息详情字段单元组件
门路:common/DetailCell.vue
次要为了标准对立订单详情页字段的显示款式。
编写订单详情页可参考views/admin/user/Detail.vue
- 新增编辑页组件
门路:components/DynForm/index.jsx
能够实现编辑页面字段的增量更新,防止只批改一个字段更新全副字段的问题。
标准对立订单详情页字段的显示款式。
编写订单详情页可参考-有待补充demo
标准文档
我的项目和编码标准文档是致力于为初创企业、初创团队、新我的项目提供对立的标准,不便我的项目疾速启动,团队合作,保障品质。
倡议约定团队成员装置如下我的项目和编码标准开发。
点击查看 前端我的项目和编码标准
次要分享以下几方面:
- 前端对立标准规范
- 约定我的项目标准,进步代码可读性,不便团队新成员疾速退出我的项目开发。
约定编码格调和标准,躲避一些技术踩坑,晋升代码品质。(蕴含Vue、React等编码标准) - git治理
- 工程配置
- 编程小技巧
- 性能优化
- FAQ查问
- Vue、Nest、Rect等我的项目工程模板
会对工程模板有具体的文档阐明,模板可反对我的项目疾速启动。
个性(Features)
- [x] vite打包编译优化
- [x] 表格的自适应
- [x] 关上页面进度条显示
- [x] 页面全屏
- [x] 全局设置组件大小
- [x] 表格通过el-height-adaptive-table指令实现高度自适应
License
MIT
可参考阮一峰老师的开源协定阐明
后续还会持续产出React的工程模板、nodejs(Nestjs)工程模板、性能优化专题、前端FAQ、我的项目和编码标准等,敬请期待...