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、我的项目和编码标准等,敬请期待...