{"id":14989523,"url":"https://github.com/rainmango/vue3-composition-admin","last_synced_at":"2025-04-09T19:15:28.261Z","repository":{"id":37462254,"uuid":"324962595","full_name":"RainManGO/vue3-composition-admin","owner":"RainManGO","description":"🎉  基于vue3 的管理端模板(Vue3 TS Vuex4  element-plus vue-i18n-next  composition-api)  vue3-admin   vue3-ts-admin","archived":false,"fork":false,"pushed_at":"2024-10-09T08:58:51.000Z","size":20239,"stargazers_count":3187,"open_issues_count":41,"forks_count":922,"subscribers_count":32,"default_branch":"main","last_synced_at":"2025-04-09T19:15:17.528Z","etag":null,"topics":["axios-mapper","composition-api","dotenv-cli","echats","element-plus","koa2","sass","typescript","vue-admin","vue-element-admin","vue-i18n-next","vue-router-next","vue3","vue3-admin","vue3-composition-admin","vue3-composition-api","vuex4"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RainManGO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-28T09:02:29.000Z","updated_at":"2025-04-08T08:34:15.000Z","dependencies_parsed_at":"2024-09-15T16:05:06.443Z","dependency_job_id":"c8a67b96-ad2d-48a7-a119-fd29498a5cf4","html_url":"https://github.com/RainManGO/vue3-composition-admin","commit_stats":{"total_commits":222,"total_committers":15,"mean_commits":14.8,"dds":"0.36036036036036034","last_synced_commit":"40abe1f66725569afdb4c2070de526455a2404ff"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RainManGO%2Fvue3-composition-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RainManGO%2Fvue3-composition-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RainManGO%2Fvue3-composition-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RainManGO%2Fvue3-composition-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RainManGO","download_url":"https://codeload.github.com/RainManGO/vue3-composition-admin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094987,"owners_count":21046770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios-mapper","composition-api","dotenv-cli","echats","element-plus","koa2","sass","typescript","vue-admin","vue-element-admin","vue-i18n-next","vue-router-next","vue3","vue3-admin","vue3-composition-admin","vue3-composition-api","vuex4"],"created_at":"2024-09-24T14:18:30.015Z","updated_at":"2025-04-09T19:15:28.231Z","avatar_url":"https://github.com/RainManGO.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/rcyj-FED/vue3-composition-admin-docs\" target=\"_blank\"\u003e\r\n    \u003cimg width=\"180\" src=\"https://github.com/rcyj-FED/vue3-composition-admin-docs/blob/main/docs/.vuepress/public/icons/android-chrome-192x192.png\" alt=\"logo\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/vuejs/vue\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/vue-3.0-brightgreen.svg\" alt=\"vue\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/element-plus/element-plus\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/element--plus-1.x-blue\" alt=\"element-plus\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/vuejs/vuex\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/vuex-4.0-brightgreen\" alt=\"vuex\"\u003e\r\n  \u003c/a\u003e\r\n   \u003ca href=\"https://github.com/intlify/vue-i18n-next\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/vue--i18n--next-9.0-brightgreen\" alt=\"vue-i18n-next\"\u003e\r\n   \u003c/a\u003e\r\n   \u003ca href=\"https://github.com/npm/npm\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/npm-6.1.8-blue\" alt=\"npm\"\u003e\r\n   \u003c/a\u003e\r\n   \u003ca href=\"https://gitter.im/vue3Admin/community\"\u003e\r\n    \u003cimg src=\"https://badges.gitter.im/Join%20Chat.svg\" alt=\"gitter\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n\u003e vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。\r\n\r\n## 简介\r\n\r\n项目的基础版本出自于源于花裤衩大佬的 vue-element-admin。\r\n\r\n版本：\r\n\r\nvue2+js版本：[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)\r\n\r\nvue2+ts版本：[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) \r\n\r\nvue3 发布之后，性能增强，速度vue2的倍数，打包体积都在减小（treeshaking），composition api 增加了项目可读性。\r\n\r\n项目目的：\r\n\r\n- 学习vue3+ts\r\n- 保持 composition api 风格\r\n\r\n在线demo演示地址：https://admin-tmpl-test.rencaiyoujia.cn/\r\n\r\n## 相关项目\r\n\r\n- 基于该项目[RuoYi-Vue3](https://github.com/rcyj-FED/RuoYi-Vue3) (后端路由案例)\r\n- 微应用乾坤版本[RuoYi-Vue3-qinkun](https://github.com/RainManGO/RuoYi-Vue3-qiankun)\r\n- 国内gitee版本 [vue3-composition-admin](https://gitee.com/codeZyZ_admin/vue3-composition-admin) \r\n\r\n\r\n### 功能\r\n\r\n```text\r\n- 用户管理\r\n\t- 登录（视频背景）\r\n\t- 注销\r\n\t\r\n- 权限验证\r\n  - 页面权限\r\n  - 指令权限\r\n  - 权限配置\r\n  - 二步登录\r\n\r\n- 多环境发布 (对应serve,build)\r\n  - dev\r\n  - test\r\n  - prod\r\n  \r\n- 全局功能\r\n  - iconfont\r\n  - 国际化多语言\r\n  - 多种动态换肤\r\n  - 动态侧边栏（支持多级路由嵌套）\r\n  - 动态面包屑\r\n  - 快捷导航(标签页)\r\n  - 本地/后端 mock 数据\r\n  - Screenfull全屏\r\n  - 自适应收缩侧边栏\r\n\r\n- 编辑器\r\n  - 富文本\r\n\r\n- Excel\r\n  - 导出excel\r\n  - 导入excel\r\n  - 前端可视化excel\r\n  - 导出zip\r\n\r\n- 表格\r\n  - 动态表格\r\n  - 拖拽表格\r\n  - 内联编辑\r\n\r\n- 错误页面\r\n  - 401\r\n  - 404\r\n\r\n- 組件\r\n  - 头像上传\r\n  - 返回顶部\r\n  - 拖拽Dialog\r\n  - 拖拽Select\r\n  - 拖拽看板\r\n  - 列表拖拽\r\n  - Dropzone\r\n  - Sticky\r\n  - CountTo (to do)\r\n\r\n- 综合实例\r\n- 错误日志\r\n- Dashboard\r\n- 引导页\r\n- ECharts 图表\r\n- Clipboard(剪贴复制)\r\n```\r\n\r\n\r\n\r\n### 目录结构\r\n\r\n```\r\nadmin-tmpl\r\n├─ .env.dev.build     # 开发环境\r\n├─ .env.dev.serve     # 开发本地本地\r\n├─ .env.prod.build    # 生产环境\r\n├─ .env.prod.serve    # 生产环境本地\r\n├─ .env.test.build    # 测试环境\r\n├─ .env.test.serve    # 测试环境本地\r\n├─ .eslintrc.js       # eslint\r\n├─ README.md          \r\n├─ dist               # 打包dist\r\n├─ mock               # mock服务\r\n├─ public             # 静态资源\r\n├─ src                # 源码\r\n│  ├─ @types          # ts 声明\r\n│  ├─ apis            # 接口请求\r\n│  ├─ assets          # webpack打包的资源\r\n│  ├─ components      # 公共组件\r\n│  ├─ config          # 全部配置\r\n│  ├─ constant        # 常量\r\n│  ├─ directives      # 全局指令\r\n│  ├─ layout          # 全局Layout\r\n│  ├─ locales         # 国际化\r\n│  ├─ model           # 全部model存放\r\n│  ├─ plugins         # 插件\r\n│  ├─ router          # 路由\r\n│  ├─ store           # 全局store管理\r\n│  ├─ styles          # 全局样式\r\n│  ├─ utils           # 全局公共方法\r\n│  └─ views           # 所有业务页面\r\n├─ tsconfig.json      # ts 编译配置\r\n└─ vue.config.js      # vue-cli 配置\r\n\r\n```\r\n\r\n## HighLight\r\n\r\n项目均已最新技术实现，Vue3配套升级全家桶和涉及的插件组件等\r\n\r\n项目采用技术:\r\n\r\n- vue3 + composition api\r\n- typescript3.9\r\n- sass (dart sass)\r\n- [echats5](https://github.com/apache/echarts)\r\n\r\nvue next 系列:\r\n\r\n- [element-plus](https://github.com/element-plus/element-plus)\r\n- [vue-router-next](https://github.com/vuejs/vue-router-next)\r\n- [vuex-4.0](https://github.com/vuejs/vuex)\r\n- [vue-i18n-next](https://github.com/intlify/vue-i18n-next)\r\n\r\n\r\n## Document\r\n\r\n- [博客文档地址](https://blog.csdn.net/zy_flyway/category_6335128.html)\r\n- [文档地址](https://rcyj-fed.github.io/vue3-composition-admin-docs/)\r\n- [文档项目git地址](https://github.com/rcyj-FED/vue3-composition-admin-docs)\r\n\r\n\r\n## Setup\r\n\r\n项目主要是前端和mock server（node）\r\n\r\n### 前后端都启动\r\n\r\n```shell\r\n  yarn\r\n  yarn start\r\n```\r\n\r\n\r\n### 单独启动 Mock\r\n\r\n后台模拟服务器和其他版本不同，采用koa2+Faker进行模拟。\r\n\r\n- [Koa2](https://github.com/koajs/koa)\r\n- [Faker](https://github.com/Marak/faker.js)\r\n\r\n启动mock server:\r\n\r\n```shell\r\n    yarn mock\r\n```\r\n\r\nmock 需要部署到服务器，单独项目地址：https://github.com/rcyj-FED/admin-tmpl-mock\r\nmock在线测试地址：https://admin-tmpl-mock-test.rencaiyoujia.cn/\r\n\r\n### 单独启动 vue admin\r\n\r\n\r\n```shell\r\n    yarn  serve:dev\r\n```\r\n\r\n多环境命令查看package.json  script:\r\n\r\n``` shell\r\n    \"serve:dev\": \"cross-env NODE_ENV=development dotenv -e .env.dev.serve vue-cli-service serve\",\r\n    \"build:dev\": \"cross-env NODE_ENV=production  dotenv -e .env.dev.build vue-cli-service build\",\r\n    \"serve:test\": \"cross-env NODE_ENV=development dotenv -e .env.test.serve vue-cli-service serve\",\r\n    \"build:test\": \"cross-env NODE_ENV=production  dotenv -e .env.test.build vue-cli-service build\",\r\n    \"serve:prod\": \"cross-env NODE_ENV=development dotenv -e .env.prod.serve vue-cli-service serve\",\r\n    \"build:prod\": \"cross-env NODE_ENV=production  dotenv -e .env.prod.build vue-cli-service build\",\r\n```\r\n\r\n\r\n### eslint\r\n\r\n```shell\r\n    yarn  lint\r\n```\r\n\r\n提交自动检测：\r\n\r\n```json\r\n \"gitHooks\": {\r\n    \"pre-commit\": \"lint-staged\"\r\n  },\r\n  \"lint-staged\": {\r\n    \"*.{js,jsx,vue,ts,tsx}\": [\r\n      \"vue-cli-service lint\",\r\n      \"git add\"\r\n    ]\r\n  }\r\n```\r\n\r\n## Browsers support\r\n\r\nModern browsers and Internet Explorer 10+.\r\n\r\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari |\r\n| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |\r\n| IE10, IE11, Edge                                             | last 2 versions                                              | last 2 versions                                              | last 2 versions                                              |\r\n\r\n## 讨论交流（QQ群：584617908）\r\n\r\n  \u003cp align=\"left\"\u003e\r\n  \u003ca  target=\"_blank\"\u003e\r\n    \u003cimg width=\"180\" src=\"https://github.com/RainManGO/vue3-composition-admin/blob/main/IMAGE/QQ.JPG\" alt=\"qq\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n## License\r\n\r\n[MIT](https://github.com/rcyj-FED/vue3-composition-admin/blob/main/LICENSE)\r\n\r\nCopyright (c) 2021-present \r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frainmango%2Fvue3-composition-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frainmango%2Fvue3-composition-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frainmango%2Fvue3-composition-admin/lists"}