{"id":13679651,"url":"https://github.com/youlaitech/vue3-element-admin","last_synced_at":"2025-05-14T05:10:23.289Z","repository":{"id":39794842,"uuid":"427699912","full_name":"youlaitech/vue3-element-admin","owner":"youlaitech","description":"🔥基于 vue 3 + vite 6+ typescript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。","archived":false,"fork":false,"pushed_at":"2025-04-19T01:02:58.000Z","size":5017,"stargazers_count":1839,"open_issues_count":15,"forks_count":452,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-19T04:57:27.425Z","etag":null,"topics":["element-plus","typescipt","vite","vue","vue-admin","vue-element-admin","vue-router","vue3","vue3-element-admin"],"latest_commit_sha":null,"homepage":"https://vue.youlai.tech","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/youlaitech.png","metadata":{"files":{"readme":"README.en-US.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2021-11-13T15:20:36.000Z","updated_at":"2025-04-19T01:03:01.000Z","dependencies_parsed_at":"2023-12-17T15:29:10.127Z","dependency_job_id":"757e685b-759d-4a85-8439-c6d223d4fed5","html_url":"https://github.com/youlaitech/vue3-element-admin","commit_stats":{"total_commits":1716,"total_committers":38,"mean_commits":45.1578947368421,"dds":"0.16550116550116545","last_synced_commit":"cc88e50cbe1d76d4907e9648915c1e7a37fa4533"},"previous_names":[],"tags_count":14,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youlaitech%2Fvue3-element-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youlaitech%2Fvue3-element-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youlaitech%2Fvue3-element-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youlaitech%2Fvue3-element-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youlaitech","download_url":"https://codeload.github.com/youlaitech/vue3-element-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076849,"owners_count":22010611,"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":["element-plus","typescipt","vite","vue","vue-admin","vue-element-admin","vue-router","vue3","vue3-element-admin"],"created_at":"2024-08-02T13:01:07.975Z","updated_at":"2025-05-14T05:10:23.273Z","avatar_url":"https://github.com/youlaitech.png","language":"Vue","funding_links":[],"categories":["Vue","前端中后台框架","Templates"],"sub_categories":["Admin Template"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"vue3-element-admin\" width=\"80\" height=\"80\" src=\"./src/assets/logo.png\"\u003e\n  \u003ch1\u003evue3-element-admin\u003c/h1\u003e\n\n  \u003cimg src=\"https://img.shields.io/badge/Vue-3.5.13-brightgreen.svg\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-6.2.2-green.svg\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Element Plus-2.9.9-blue.svg\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\"/\u003e\n  \u003ca href=\"https://gitee.com/youlaiorg\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Author-有来开源组织-orange.svg\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://gitee.com/youlaiorg/vue3-element-admin\" target=\"_blank\"\u003e\n    \u003cimg alt=\"有来技术\" src=\"https://gitee.com/youlaiorg/vue3-element-admin/badge/star.svg\"/\u003e\n   \u003c/a\u003e\n  \u003ca href=\"https://github.com/youlaitech/vue3-element-admin\" target=\"_blank\"\u003e\n    \u003cimg alt=\"有来技术\" src=\"https://img.shields.io/github/stars/youlaitech/vue3-element-admin.svg?style=social\u0026label=Stars\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://gitcode.com/youlai/vue3-element-admin\" target=\"_blank\"\u003e\n    \u003cimg alt=\"有来技术\" src=\"https://gitcode.com/youlai/vue3-element-admin/star/badge.svg\"/\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\n![](https://foruda.gitee.com/images/1708618984641188532/a7cca095_716974.png \"rainbow.png\")\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://vue.youlai.tech\"\u003e🖥️ Live Preview\u003c/a\u003e | \u003ca target=\"_blank\" href=\"https://app.youlai.tech\"\u003e📲 Mobile Preview\u003c/a\u003e |  \u003ca target=\"_blank\" href=\"https://juejin.cn/post/7228990409909108793\"\u003e📑 Documentation\u003c/a\u003e|  \u003ca target=\"_blank\" href=\"https://www.youlai.tech//vue3-element-admin\"\u003e🌐 Official Website\u003c/a\u003e | \u003ca href=\"./README.md\"\u003e💬 中文\n\u003c/div\u003e\n\n\n## Introduction\n\n[vue3-element-admin](https://gitcode.com/youlai/vue3-element-admin) is a minimalist enterprise-level backend management frontend template built with Vue3, Vite, TypeScript, and Element-Plus. It comes with complementary Java backend [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) and Node backend [youlai-nest](https://gitee.com/youlaiorg/youlai-nest). A simplified version [vue3-element-template](https://gitee.com/youlaiorg/vue3-element-template) and a JavaScript version [vue3-element-admin-js](https://gitee.com/youlaiorg/vue3-element-admin) are also available for developers to quickly start development.\n\n\n## Project Features\n\n- **Simple and Easy-to-use**: Upgraded version of [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) for Vue3, with minimal encapsulation and easy to get started.\n- **Data Interaction**: Support for `Mock` data and [online API documentation](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5), with accompanying [Java](https://gitee.com/youlaiorg/youlai-boot) and [Node](https://gitee.com/youlaiorg/youlai-nest) backend source code.\n\n- **System Functions**: Provides user management, role management, menu management, department management, dictionary management, and other functional modules.\n- **Permission Management**: Supports dynamic routing, button permissions, role permissions, and data permissions.\n\n- **Infrastructure**: Provides internationalization, multiple layouts, dark mode, full screen, watermark, API documentation, and code generator functionality.\n- **Continuous Updates**: Project is continuously updated with real-time updates of tools and dependencies.\n\n\n## Project Screenshots\n\n🖥️ **Dashboard**\n\n![](https://www.youlai.tech/storage/blog/2025/04/30/20250430085342.png)\n\n⚡**API Documentation**\n\n![](https://www.youlai.tech/storage/blog/2025/01/18/20250118183539.png)\n\n📲 **Mobile Version**\n\n![](https://www.youlai.tech/storage/blog/2025/04/30/app.jpg)\n\n## Project Source Code\n\n| Project | Gitee   | Github    | GitCode|\n| ---- | ----| ---- | ---- |\n| vue3-element-admin ✅| [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | [vue3-element-admin](https://gitcode.com/youlai/vue3-element-admin) |\n| vue3-element-admin JS Version| [vue3-element-admin-js](https://gitee.com/youlaiorg/vue3-element-admin-js) | [vue3-element-admin-js](https://github.com/youlaitech/vue3-element-admin-js) | [vue3-element-admin-js](https://gitcode.com/youlai/vue3-element-admin-js) |\n| vue3-element-admin Lite Version | [vue3-element-template](https://gitee.com/youlaiorg/vue3-element-template) | [vue3-element-template](https://github.com/youlaitech/vue3-element-template) |[vue3-element-template](https://gitcode.com/youlai/vue3-element-template)|\n| vue-uniapp-admin Mobile Version | [vue-uniapp-admin](https://gitee.com/youlaiorg/vue-uniapp-admin) | [vue-uniapp-admin](https://github.com/youlaitech/vue-uniapp-admin) |[vue-uniapp-admin](https://gitcode.com/youlai/vue-uniapp-admin)|\n| Java Backend | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot)       | [youlai-boot](https://github.com/haoxianrui/youlai-boot.git) |[youlai-boot](https://gitcode.com/youlai/youlai-boot.git)|\n| Node Backend | [youlai-nest](https://gitee.com/youlaiorg/youlai-nest)       | [youlai-nest](https://github.com/haoxianrui/youlai-nest.git) |[youlai-nest](https://gitcode.com/youlai/youlai-nest.git)|\n\n\n\n## Development Guide\n\n| Name          | Link     |\n|---------------|--------------------|\n| Video Tutorial | [https://www.bilibili.com/video/BV1eFUuYyEFj](https://www.bilibili.com/video/BV1eFUuYyEFj)  |\n| Project Setup  | [Building a Backend Management System from Scratch with Vue3, Vite, TypeScript, and Element-Plus](https://blog.csdn.net/u013737132/article/details/130191394)  |\n| Official Documentation | [https://www.youlai.tech/vue3-element-admin/](https://www.youlai.tech/vue3-element-admin/)  |\n| Code Standards     | [ESLint V9 + Prettier + Stylelint + EditorConfig for Standardized and Unified Frontend Code Style](https://youlai.blog.csdn.net/article/details/145608723) |\n| Commit Standards | [Husky + Lint-staged + Commitlint + Commitizen + cz-git for Git Commit Standards](https://youlai.blog.csdn.net/article/details/145615236) |\n| API Documentation | [https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5) |\n\n\n\n## Project Setup\n\n\n- **Environment Preparation**\n\n| Environment Type | Name                     |\n|----------------|-----------------------------|\n| **Development Tool**   | [Visual Studio Code](https://code.visualstudio.com/Download) |\n| **Runtime Environment**   | Node 18 + (Recommended [22.9.0](https://npmmirror.com/mirrors/node/v22.9.0/))  |\n\u003e ⚠️ Note: Node.js version 20.6.0 has compatibility issues, please don't use it\n\n\n- **Quick Start**\n\n```bash\n# Clone repository\ngit clone https://gitee.com/youlaiorg/vue3-element-admin.git\n\n# Change directory\ncd vue3-element-admin\n\n# Install pnpm\nnpm install pnpm -g\n\n# Set mirror source (optional)\npnpm config set registry https://registry.npmmirror.com\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm run dev\n```\n\n\n## Project Deployment\n\nAfter executing the `pnpm run build` command, the project will be bundled and a `dist` directory will be generated. Next, upload the files from the `dist` directory to the `/usr/share/nginx/html` directory on your server and configure Nginx for reverse proxy.\n\n```bash\npnpm run build\n```\n\nHere is an example Nginx configuration:\n\n```nginx\nserver {\n    listen      80;\n    server_name localhost;\n\n    location / {\n        root   /usr/share/nginx/html;\n        index  index.html index.htm;\n    }\n\n    # Reverse proxy configuration\n    location /prod-api/ {\n        # Please replace api.youlai.tech with your backend API address, and keep the trailing slash /\n        proxy_pass http://api.youlai.tech/;\n    }\n}\n```\n\nFor more detailed information, please refer to this article: [Nginx Installation and Configuration](https://blog.csdn.net/u013737132/article/details/145667694).\n\n## Local Mock\n\nThe project supports both online and local Mock interfaces. By default, it uses online interfaces. To switch to Mock interfaces, modify the `VITE_MOCK_DEV_SERVER` value in the `.env.development` file to `true`.\n\n## Backend API\n\n\u003e If you have a basic understanding of Java development, follow these steps to convert online API to local backend API and create an enterprise-level full-stack development environment to help you on your full-stack journey.\n\n1. Get the backend source code based on `Java` and `SpringBoot` from [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git).\n2. Follow the instructions in the backend project's README.md to [set up and run locally](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C).\n3. Modify the value of `VITE_APP_API_URL` in the `.env.development` file, changing it from https://api.youlai.tech to http://localhost:8989.\n\n\n## Notes\n\n- **Auto import plugin is disabled by default**\n\n  Component type declarations have been automatically generated for the template project. If you add and use new components, follow the instructions in the screenshot to enable automatic generation. After automatic generation is complete, remember to set it back to `false` to avoid conflicts.\n\n  ![](https://foruda.gitee.com/images/1687755823137387608/412ea803_716974.png)\n\n- **Blank page when accessing the project**\n\n  Try upgrading your browser, as older browser engines may not support certain new JavaScript syntax, such as optional chaining operator `?.`.\n\n- **Project synchronization with repository updates**\n\n  After synchronizing the project with repository updates, it is recommended to run `pnpm install` to update dependencies before starting.\n\n- **Red highlight on project components, functions, and imports**\n\n  Restart VSCode to try again.\n\n- **Other issues**\n\n  If you have any other issues or suggestions, please open an [ISSUE](https://gitee.com/youlaiorg/vue3-element-admin/issues/new).\n\n\n## Commit Conventions\n\nExecute `pnpm run commit` to invoke interactive git commit and complete the information input and selection according to the prompts.\n\n![](https://foruda.gitee.com/images/1687755823165218215/c1705416_716974.png)\n\n\n## Project Statistics\n\n![](https://repobeats.axiom.co/api/embed/aa7cca3d6fa9c308fc659fa6e09af9a1910506c3.svg \"Repobeats analytics image\")\n\n\nThanks to all the contributors!\n\n[![contributors](https://contrib.rocks/image?repo=youlaitech/vue3-element-admin)](https://github.com/youlaitech/vue3-element-admin/graphs/contributors)\n\n\n## Special Thanks\n\n- Thanks to the [GitCode](https://gitcode.com/) official [G-Star](https://gitcode.com/g-star) certification\n  ![](https://foruda.gitee.com/images/1728577513089814203/95f2a70d_716974.jpeg)\n\n## Community\n\n① Follow the \"Youlai Tech\" WeChat Official Account, click the **Group Chat** menu to get the QR code (this measure is taken to prevent ads from entering the group, thanks for your understanding and support).\n\n② Directly add WeChat **`haoxianrui`** with a note indicating \"Frontend/Backend/Full Stack\".\n\n![Youlai Tech WeChat Official Account](https://foruda.gitee.com/images/1737108820762592766/3390ed0d_716974.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoulaitech%2Fvue3-element-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoulaitech%2Fvue3-element-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoulaitech%2Fvue3-element-admin/lists"}