[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8726":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":44,"discoverSource":45},8726,"vue3-composition-admin","RainManGO\u002Fvue3-composition-admin","RainManGO","🎉  基于vue3 的管理端模板(Vue3 TS Vuex4  element-plus vue-i18n-next  composition-api)  vue3-admin   vue3-ts-admin","",null,"Vue",3251,919,30,40,0,1,2,30.89,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,5,39,40],"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-api","vuex4","2026-06-12 02:01:57","\u003Cp align=\"center\">\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Frcyj-FED\u002Fvue3-composition-admin-docs\" target=\"_blank\">\r\n    \u003Cimg width=\"180\" src=\"https:\u002F\u002Fgithub.com\u002Frcyj-FED\u002Fvue3-composition-admin-docs\u002Fblob\u002Fmain\u002Fdocs\u002F.vuepress\u002Fpublic\u002Ficons\u002Fandroid-chrome-192x192.png\" alt=\"logo\">\r\n  \u003C\u002Fa>\r\n\u003C\u002Fp>\r\n\r\n\r\n\u003Cp align=\"center\">\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvue-3.0-brightgreen.svg\" alt=\"vue\">\r\n  \u003C\u002Fa>\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Felement-plus\u002Felement-plus\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Felement--plus-1.x-blue\" alt=\"element-plus\">\r\n  \u003C\u002Fa>\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvuex\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvuex-4.0-brightgreen\" alt=\"vuex\">\r\n  \u003C\u002Fa>\r\n   \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fintlify\u002Fvue-i18n-next\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvue--i18n--next-9.0-brightgreen\" alt=\"vue-i18n-next\">\r\n   \u003C\u002Fa>\r\n   \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnpm\u002Fnpm\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnpm-6.1.8-blue\" alt=\"npm\">\r\n   \u003C\u002Fa>\r\n   \u003Ca href=\"https:\u002F\u002Fgitter.im\u002Fvue3Admin\u002Fcommunity\">\r\n    \u003Cimg src=\"https:\u002F\u002Fbadges.gitter.im\u002FJoin%20Chat.svg\" alt=\"gitter\">\r\n  \u003C\u002Fa>\r\n\u003C\u002Fp>\r\n\r\n\r\n> 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:\u002F\u002Fgithub.com\u002FPanJiaChen\u002Fvue-element-admin)\r\n\r\nvue2+ts版本：[vue-typescript-admin-template](https:\u002F\u002Fgithub.com\u002FArmour\u002Fvue-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:\u002F\u002Fadmin-tmpl-test.rencaiyoujia.cn\u002F\r\n\r\n## 相关项目\r\n\r\n- 基于该项目[RuoYi-Vue3](https:\u002F\u002Fgithub.com\u002Frcyj-FED\u002FRuoYi-Vue3) (后端路由案例)\r\n- 微应用乾坤版本[RuoYi-Vue3-qinkun](https:\u002F\u002Fgithub.com\u002FRainManGO\u002FRuoYi-Vue3-qiankun)\r\n- 国内gitee版本 [vue3-composition-admin](https:\u002F\u002Fgitee.com\u002FcodeZyZ_admin\u002Fvue3-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  - 本地\u002F后端 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:\u002F\u002Fgithub.com\u002Fapache\u002Fecharts)\r\n\r\nvue next 系列:\r\n\r\n- [element-plus](https:\u002F\u002Fgithub.com\u002Felement-plus\u002Felement-plus)\r\n- [vue-router-next](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-router-next)\r\n- [vuex-4.0](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvuex)\r\n- [vue-i18n-next](https:\u002F\u002Fgithub.com\u002Fintlify\u002Fvue-i18n-next)\r\n\r\n\r\n## Document\r\n\r\n- [博客文档地址](https:\u002F\u002Fblog.csdn.net\u002Fzy_flyway\u002Fcategory_6335128.html)\r\n- [文档地址](https:\u002F\u002Frcyj-fed.github.io\u002Fvue3-composition-admin-docs\u002F)\r\n- [文档项目git地址](https:\u002F\u002Fgithub.com\u002Frcyj-FED\u002Fvue3-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:\u002F\u002Fgithub.com\u002Fkoajs\u002Fkoa)\r\n- [Faker](https:\u002F\u002Fgithub.com\u002FMarak\u002Ffaker.js)\r\n\r\n启动mock server:\r\n\r\n```shell\r\n    yarn mock\r\n```\r\n\r\nmock 需要部署到服务器，单独项目地址：https:\u002F\u002Fgithub.com\u002Frcyj-FED\u002Fadmin-tmpl-mock\r\nmock在线测试地址：https:\u002F\u002Fadmin-tmpl-mock-test.rencaiyoujia.cn\u002F\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:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fedge\u002Fedge_48x48.png\" alt=\"IE \u002F Edge\" width=\"24px\" height=\"24px\" \u002F>](https:\u002F\u002Fgodban.github.io\u002Fbrowsers-support-badges\u002F)\u003C\u002Fbr>IE \u002F Edge | [\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Ffirefox\u002Ffirefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" \u002F>](https:\u002F\u002Fgodban.github.io\u002Fbrowsers-support-badges\u002F)\u003C\u002Fbr>Firefox | [\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fchrome\u002Fchrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" \u002F>](https:\u002F\u002Fgodban.github.io\u002Fbrowsers-support-badges\u002F)\u003C\u002Fbr>Chrome | [\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Falrra\u002Fbrowser-logos\u002Fmaster\u002Fsrc\u002Fsafari\u002Fsafari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" \u002F>](https:\u002F\u002Fgodban.github.io\u002Fbrowsers-support-badges\u002F)\u003C\u002Fbr>Safari |\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\">\r\n  \u003Ca  target=\"_blank\">\r\n    \u003Cimg width=\"180\" src=\"https:\u002F\u002Fgithub.com\u002FRainManGO\u002Fvue3-composition-admin\u002Fblob\u002Fmain\u002FIMAGE\u002FQQ.JPG\" alt=\"qq\">\r\n  \u003C\u002Fa>\r\n\u003C\u002Fp>\r\n\r\n## License\r\n\r\n[MIT](https:\u002F\u002Fgithub.com\u002Frcyj-FED\u002Fvue3-composition-admin\u002Fblob\u002Fmain\u002FLICENSE)\r\n\r\nCopyright (c) 2021-present \r\n","vue3-composition-admin 是一个基于 Vue 3 和 TypeScript 的管理端模板解决方案，采用 Composition API 风格编写。项目集成了 Element Plus、Vuex 4 和 Vue I18n Next 等现代前端技术栈，提供了用户管理、权限验证、多环境发布配置、国际化支持、动态换肤、富文本编辑器以及 Excel 导入导出等功能。该模板适用于需要快速搭建企业级后台管理系统并希望利用 Vue 3 性能优势的场景。","2026-06-11 03:19:28","top_language"]