关于前端:vue3的管理端项目工程模板来了可直接快速开发项目不用再考虑各种配置和优化真香

5次阅读

共计 1783 个字符,预计需要花费 5 分钟才能阅读完成。

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

正文完
 0