ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-08-07 22:03:03  阅读:157  来源: 互联网

标签:插件 vue 项目 规范 vue3 组件 模板 页面


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
    可以实现编辑页面字段的增量更新,避免只修改一个字段更新全部字段的问题。
    规范统一订单详情页字段的显示样式。
    编写订单详情页可参考??

规范文档

项目和编码规范文档是致力于为初创企业、初创团队、新项目提供统一的规范,方便项目快速启动,团队协作,保障质量。
建议约定团队成员安装如下项目和编码规范开发。
点击查看 前端项目和编码规范

主要分享以下几方面:

  • 前端统一标准规范
  • 约定项目规范,提高代码可读性,方便团队新成员快速加入项目开发。
    约定编码风格和规范,规避一些技术踩坑,提升代码质量。(包含Vue、React等编码规范)
  • git管理
  • 工程配置
  • 编程小技巧
  • 性能优化
  • FAQ查询
  • Vue、Nest、Rect等项目工程模板
    会对工程模板有详细的文档说明,模板可支持项目快速启动。

特性(Features)

License

MIT

可参考阮一峰老师的开源协议说明

标签:插件,vue,项目,规范,vue3,组件,模板,页面
来源: https://www.cnblogs.com/M-Silencer/p/16559991.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有