{"id":15011171,"url":"https://github.com/szqlovepk/vue-admin","last_synced_at":"2025-07-24T06:04:09.543Z","repository":{"id":43697303,"uuid":"373059043","full_name":"szqlovepk/vue-admin","owner":"szqlovepk","description":"vue 中后台系统解决方案- a solution for vue middle or background system","archived":false,"fork":false,"pushed_at":"2022-04-18T08:31:52.000Z","size":583,"stargazers_count":235,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-09T00:11:30.449Z","etag":null,"topics":["animate-css","axios","dayjs","dotenv","element-ui","less","management-system","ts","vue","vue-cli-4","vue-router","vuex","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/szqlovepk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-02T06:11:53.000Z","updated_at":"2024-12-01T05:50:50.000Z","dependencies_parsed_at":"2022-08-02T20:15:07.329Z","dependency_job_id":null,"html_url":"https://github.com/szqlovepk/vue-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/szqlovepk/vue-admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szqlovepk%2Fvue-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szqlovepk%2Fvue-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szqlovepk%2Fvue-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szqlovepk%2Fvue-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/szqlovepk","download_url":"https://codeload.github.com/szqlovepk/vue-admin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szqlovepk%2Fvue-admin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266801380,"owners_count":23986371,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animate-css","axios","dayjs","dotenv","element-ui","less","management-system","ts","vue","vue-cli-4","vue-router","vuex","webpack"],"created_at":"2024-09-24T19:39:26.595Z","updated_at":"2025-07-24T06:04:09.513Z","avatar_url":"https://github.com/szqlovepk.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-admin\n\n## a solution for vue middle or background system(vue 中后台系统解决方案)\n\n### [github 地址](https://github.com/szqlovepk/vue-admin)\n\n### [预览地址](https://szqlovepk.github.io/vue-admin-dist/)\u0026#x1F601;\u0026#x1F601;\n\n### 前言 🔥🔥🔥🔥🔥🔥\n\n\u003e vue 作为国内前端最常用的 js 框架之一，在处理复杂交互的单页应用中对国内码农很友好，文档比较详细。对于中后台管理系统企业开发比较常用，所以利用空余时间集成了一个常用版本出来(没有 vue 基础的同学可以先学习 [vue](https://cn.vuejs.org/) 的基础知识)，可 clone 至本地进行业务快速开发\n\n### 安装运行\n\n1.使用 vue2-admin-cli 脚手架工具下载或克隆项目源码 🔥🔥\n\n```\nnpm install -g vue2-admin-cli // 安装vue2-admin-cli\n# or\nyarn global add vue2-admin-cli\n\nvue2-admin-cli init \u003cproject_name\u003e // 创建项目\nor\ngit clone https://github.com/szqlovepk/vue-admin.git\n```\n\n2.yarn 安装依赖(国内建议增加淘宝镜像源，不然很慢，你懂的 😁)\n`yarn`\n\n3.启动项目\n`yarn serve`\n\n4.打包项目\n\n```\nbuild:qa // qa环境\nbuild:pre // pre环境\nbuild:prod // 线上生产环境\n```\n\n### 依赖模块\n\n\u003e 项目基于 [vue-cli4.x](https://cli.vuejs.org/zh/) 脚手架生成，主要还是列出新添加的依赖包和相关的文档\n\n- [vue-router](https://router.vuejs.org/zh/) Vue.js 官方的路由管理器。\n- [vuex](https://vuex.vuejs.org/zh/) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式\n- [animate.css](https://animate.style/) 一款好用的 css 动画库\n- [dayjs](https://dayjs.fenxianglu.cn/) 一个极简的 JavaScript 库，可以为现代浏览器解析、验证、操作和显示日期和时间\n- [element-ui](https://element.eleme.io/#/zh-CN) Vue 2.0 的桌面端组件库\n\n- [axios](http://www.axios-js.com/zh-cn/) 易用、简洁且高效的 http 库\n- [lodash](https://www.lodashjs.com/) 一个一致性、模块化、高性能的 JavaScript 实用工具库。\n- [echarts](https://echarts.apache.org/zh/index.html) 一个基于 JavaScript 的开源可视化图表库\n- [js-cookie](https://github.com/js-cookie/js-cookie) 一个用于处理 cookie 的简单、轻量级 JavaScript API\n- [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) vue-property-decorator 深度依赖了 vue-class-component 拓展出了很多操作符。正常开发的时候你只需要使用 vue-property-decorator 中提供的操作符即可\n- [vuex-module-decorators](https://championswimmer.in/vuex-module-decorators/) vuex 模块装饰器\n- [wangeditor](https://www.wangeditor.com/v4/) 一款 vue 常用的富文本组件，我用的时候是 4.x 的版本，最近看已经出新版本了\n- [timeago.js](https://github.com/hustcc/timeago.js)，[vue-count-to](https://panjiachen.github.io/countTo/) 我用来做一些首页的日期和数字的展示效果\n\n### 代码目录\n\n```\nvue-admin\n├─ .browserslistrc\n├─ .eslintrc.js\n├─ .gitignore\n├─ babel.config.js\n├─ package.json\n├─ public\n│  ├─ favicon.ico\n│  └─ index.html\n├─ README.md\n├─ src\n│  ├─ api\n│  │  ├─ index.ts\n│  │  ├─ modules\n│  │  │  └─ home.ts\n│  │  └─ request.ts\n│  ├─ App.vue\n│  ├─ assets\n│  │  └─ logo.png\n│  ├─ components\n│  │  ├─ echarts\n│  │  │  ├─ Bar.vue\n│  │  │  ├─ Line.vue\n│  │  │  └─ Pie.vue\n│  │  ├─ Editor.vue\n│  │  ├─ index.ts\n│  │  └─ layout\n│  │     ├─ Header.vue\n│  │     ├─ index.vue\n│  │     ├─ Menu.vue\n│  │     └─ SubMenu.vue\n│  ├─ constant\n│  │  └─ url.ts\n│  ├─ directives\n│  │  └─ index.ts\n│  ├─ index.less\n│  ├─ main.ts\n│  ├─ plugins\n│  │  └─ index.ts\n│  ├─ router\n│  │  ├─ config.ts\n│  │  └─ index.ts\n│  ├─ shims-tsx.d.ts\n│  ├─ shims-vue.d.ts\n│  ├─ store\n│  │  ├─ index.ts\n│  │  └─ modules\n│  │     └─ auth.ts\n│  ├─ utils\n│  │  └─ index.ts\n│  └─ views\n│     ├─ animation\n│     │  ├─ Animate.vue\n│     │  └─ Element.vue\n│     ├─ auth\n│     │  ├─ authDirective.vue\n│     │  └─ authPage.vue\n│     ├─ component\n│     │  └─ EditorPage.vue\n│     ├─ error\n│     │  ├─ ForbiddenPage.vue\n│     │  ├─ InternalServerErrorPage.vue\n│     │  └─ NotFoundPage.vue\n│     ├─ form\n│     │  └─ BasicForm.vue\n│     ├─ Home.vue\n│     ├─ icon\n│     │  └─ IconFont.vue\n│     ├─ lodash\n│     │  └─ DebounceAndThrottle.vue\n│     ├─ Login.vue\n│     ├─ mode\n│     │  └─ index.vue\n│     ├─ router\n│     │  ├─ Sub1-1-1.vue\n│     │  ├─ Sub1-1-2.vue\n│     │  ├─ Sub1-1.vue\n│     │  ├─ Sub1-2.vue\n│     │  ├─ Sub1.vue\n│     │  └─ Sub2.vue\n│     └─ table\n│        └─ BasicTable.vue\n├─ tsconfig.json\n├─ vue.config.js\n└─ yarn.lock\n\n```\n\n### 路由-侧边栏-面包屑-权限\n\n一个后台应用的关键骨架当然少不了路由，侧边菜单栏，面包屑和权限，这些都在 vue-admin 中实现了一套配置化管理，只需你按照约定的规则进行配置这些都将动态生成。🙌🙌\n\n##### 配置项\n\n```\ninterface IBaseRouter {\n  path: string; // 路由\n  name?: string; // 名称\n  children?: IBaseRouter[]; // 子路由\n  redirect?: RedirectOption; // 路由重定向\n  meta?: IMeta;\n  hidden?: boolean; // (默认 false)当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些子页面编辑页面/edit/1\n  component?: Component; // 路由渲染的组件页面\n  props?: boolean; // 当 props 设置为 true 时，route.params 将被设置为组件的 props。\n}\n```\n\n```\ninterface IMeta {\n  title?: string; // 设置该路由在侧边栏和面包屑中展示的名字 不设置时不展示\n  icon?: string; // 设置该路由在左侧菜单展示的图标 element-ui的icon\n  breadcrumbAll?: boolean; //(默认 true)如果设置为false，则整个面包屑不会显示 此时可以自己在页面中写自定义的面包屑\n  breadcrumb?: boolean; // (默认 true)如果设置为false，该路由则不会在breadcrumb面包屑中显示\n  breadcrumbTo?: boolean; // (默认 true)该路由对应的面包屑是否可以点击\n  activeMenu?: string; // 指定要高亮的左侧边栏的菜单 在跳转菜单的子页面但是想高亮左侧边栏时非常有用\n  auth?: string; // 权限点唯一标识key 不配置时默认都可见 配置时权限接口返回的数组中需包含该key才会展示\n}\n```\n\n### 权限\n\n- 菜单路由权限配置，菜单无权限时左侧边栏不会展示，页面无权限时会拦截至 403 页面\n\n```\n{\n        path: \"authPage\",\n        name: \"authPage\",\n        component: () =\u003e import(\"../views/auth/authPage.vue\"),\n        meta: {\n          title: \"权限演示菜单\",\n          auth: \"authPage\",  //配置权限点key\n        },\n      },\n```\n\n- 组件权限采用 v-auth 指令并配置权限点 key\n\n```\n\u003cinput v-focus v-auth:authDirective /\u003e\n```\n\n### 请求拦截器\n\nvue-admin 中已为您添加基于 axios 封装的请求拦截器配置 💖💖\n\n- ##### 请求成功数据获取，异常数据捕获并 message 提示，401 拦截至登录界面\n- ##### 全局 loading，默认请求时开启，请求完成时关闭，可配置关闭\n\n```\nexport const appList = (params: any): Promise\u003cany\u003e =\u003e\n  request.get(\"/app\", { params, loading: true }); // 不需要默认的全局loading效果可配置loading为false关闭 loading默认为true\n\n```\n\n- ##### 统一下载 blob 文件配置，您不需要单独处理下载 blob 文件流，只需要在请求接口配置中加入 responseType: \"blob\"；如果您想获取接口返回数据，直接在 promise.then(res =\u003e {}, rej=\u003e {})中获取处理即可\n\n```\n\nexport const exportGoods = (data: any) =\u003e\n  request.post(\"/export\", data, {\n    responseType: \"blob\",\n  });\n```\n\n### 模式和环境变量\n\nvue-admin 已默认添加常用的 development，qa，pre，prod 四种环境区分，您可根据实际业务需求增加或修改。\n\n##### 环境变量\n\n- NODE_ENV：当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 \"production\" 来获取可用于部署的应用程序\n- VUE_APP_ENV：用于区分环境的变量，常用于区分不同环境下的服务端 api 域名\n\n```\n.env.prod\n\nNODE_ENV = \"production\"\nVUE_APP_ENV = 'prod'\n```\n\n```\nsrc/consatnt/url.ts\n\nexport default {\n  dev: {\n    home: \"http://localhost:7009\",\n  },\n  qa: {\n    home: \"http://vue-admin.qa.com\",\n  },\n  pre: {\n    home: \"http://vue-admin.pre.com\",\n  },\n  prod: {\n    home: \"http://vue-admin.prod.com\",\n  },\n};\n\n```\n\n### 功能模块\n\n##### 登录\n\n登录注入 token 在 cookie 中，有效期为一天\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/%E7%99%BB%E5%BD%95.gif)\n\n##### 首页\n\n完备的首页布局，栅格式响应布局方案，echarts 图表使用\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/%E9%A6%96%E9%A1%B5.gif)\n\n##### 图标\n\n引入阿里图标库，支持样式编辑，特别好用 ✨✨\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/%E5%9B%BE%E6%A0%87.gif)\n\n##### 模式和环境变量\n\n企业项目实际使用场景区分 qa，pre，prod 环境，可根据实际情况添加修改\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F.png)\n\n##### 权限\n\n集成了菜单路由权限和组件指令权限\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/auth.gif)\n\n##### 表格\n\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/%E5%9F%BA%E7%A1%80%E8%A1%A8%E6%A0%BC.png)\n\n##### 表单\n\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/%E5%9F%BA%E7%A1%80%E8%A1%A8%E5%8D%95.png)\n\n##### 动画\n\nelement 动画和 animate.css 动画演示，突然想起来以前做移动端 h5 的时候有弹层滑入滑出的需求，所以撸了一下示例 😁😁\n\n- element\n  ![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/element.gif)\n- animate.css\n  ![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/animate.gif)\n\n##### 错误页面\n\n- 404-路由错误\n  ![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/404.png)\n- 403-访问权限\n  ![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/403.png)\n- 500-服务异常\n  ![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/500.png)\n\n##### lodash\n\n这里我只演示了比较常用的防抖和节流的用法，很多小伙伴搞不清楚防抖和节流的区别，通过这个示例帮助一下了解 👋\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/lodash.gif)\n\n##### 路由嵌套\n\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/sub1-1-2.png)\n\n##### 组件\n\n用富文本组件演示一下如何自定义封装一个表单组件\n![image](https://github.com/szqlovepk/project-photos/blob/master/imgs/vue-admin/editor.gif)\n\n##### 注销\n\n注销时清空权限和 cookie 中的 token\n\n### 结尾\n\n该项目会不定时更新，该模板目前为 vue2.x 版本，后续会添加更多的模块，并推出 vue3 版本\n欢迎和感谢大家 PR~~👏👏\n若有问题，可加微信与我进行交流（szq10_04) 😁 😁\n\n如果对你有帮助，给个 star 哟~~❤️❤️❤️❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszqlovepk%2Fvue-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszqlovepk%2Fvue-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszqlovepk%2Fvue-admin/lists"}