A set of background integration scheme based on vue3, element plus, typesscript4 and vite2




English | 中文


vue-element-plus-admin is a free and open source middle and background template based on element-plus. Developed using the latest mainstream technologies such as vue3, vite2 and typescript, the out of the box middle and background front-end solution can be used as the starting template of the project and learning reference. And always pay attention to the latest technological trends and update them as soon as possible.

vue-element-plus-admin is positioned as a background integration scheme, which is not suitable for secondary development as a basic template. Because it integrates many functions that you may not use, it will cause a lot of code redundancy. If your project doesn't pay attention to this problem, you can also directly carry out secondary development based on it.

If you need a basic template, please switch to the tempalte branch. Tempalte simply integrates some common layout functions such as layout and dynamic menu, which is more suitable for developers to carry out secondary development.


  • State of The Art Development:Use front-end front-end technology development such as Vue3/vite2
  • TypeScript: Application-level JavaScript language
  • Theming: Configurable themes
  • International:Built-in complete internationalization program
  • Mock Server Built-in mock data scheme
  • Authority Built-in complete dynamic routing permission generation scheme.
  • Component Multiple commonly used components are encapsulated twice
  • Examples Built-in rich examples


account: admin/admin test/test

admin account is used to simulate the control permission of the server, and render whatever the server returns

test account is used to simulate the front-end control authority. The server only returns the menu key to be displayed, and the front-end performs matching rendering


Document Github

Document Gitee


  • node and git - Project development environment
  • Vite - Familiar with vite features
  • Vue3 - Familiar with Vue basic syntax
  • TypeScript - Familiar with the basic syntax of TypeScript
  • Es6+ - Familiar with es6 basic syntax
  • Vue-Router-Next - Familiar with the basic use of vue-router
  • Element-Plus - Familiar with the basic use of element-plus
  • Mock.js - mockjs basic syntax

Install and use

  • Get the project code
git clone https://github.com/kailong321200875/vue-element-plus-admin.git
  • Installation dependencies
cd vue-element-plus-admin

pnpm install
  • run
pnpm run dev
  • build
pnpm run build:pro

Change Log


How to contribute

You can Raise an issue Or submit a Pull Request.

Pull Request:

  1. Fork code
  2. Create your own branch: git checkout -b feat/xxxx
  3. Submit your changes: git commit -am 'feat(function): add xxxxx'
  4. Push your branch: git push origin feat/xxxx
  5. submit pull request

Git Contribution submission specification

  • feat New features
  • fix Fix bugs
  • docs document
  • style Format and style (changes that do not affect code operation)
  • refactor Refactor
  • perf Optimize related, such as improving performance and experience
  • test Add test
  • build Compilation related modifications, changes to project construction or dependencies
  • ci Continuous integration modification
  • chore Changes in the construction process or auxiliary tools
  • revert Rollback to previous version
  • workflow Workflow improvement
  • mod Uncertain modification classification
  • wip Under development
  • types type

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, not IE

not support last 2 versions last 2 versions last 2 versions last 2 versions



  • Dialog和Form表单配合使用问题


    作者您好,首先非常感谢你的这一套项目,对于我们帮助很大 如今我遇到这样一个问题,就是Dialog组件和Form配合使用时会报错 The form is not registered. Please use the register method to register 按照你给的例子分开,将Form当成一个组件不会报错,但实际在开发中往往有时写在一起会更方便一些,不知道这个问题是设计如此还是存在的问题呢

    opened by 2624431797 7
  • Can I make select component load its options from api by editing schema?

    Can I make select component load its options from api by editing schema?

    Hello @kailong321200875 I have search bar with input and select components. No problems in input but not in select. Now I'm updating my previous version using this template and it's load options from backend originally. I'd like to establish this function by editing search schema.


    Just want to set componentProps using link of api from backend. Like this one.

    componentsProps: '/sys/dict/option-list'

    Is this possible?

    opened by lacmansoftware 6
  • 启动报错,这是什么原因呢?


    F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite-plugin-html\dist\index.cjs:125 const proxy = viteConfig.server?.proxy ?? {}; ^

    SyntaxError: Unexpected token '.' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\vite.config.ts:46:31) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.require.extensions. [as .ts] (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71416:20) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at loadConfigFromBundledFile (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71424:17) at loadConfigFromFile (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71343:32) Waiting for the debugger to disconnect...  ELIFECYCLE  Command failed with exit code 1.

    opened by seasonl2014 6
  • Which format extension should I use in this template?

    Which format extension should I use in this template?

    Hello @kailong321200875 Thank you for your kind response. Those are the most helpful for me. Thank you again.

    And I got another issue and here is. It's just code formatting problem.

    1. I enjoy using prettier for code formatting and it's working well in other projects and also checked now. but it's not working in this template. I can't find that in formatter list, like following. image How can I fix this?

    2. Why is this error occurred? image It's just code format error(eslint related) and possible to affect project running? What formatter extension should I use fix this formatting error automatically in vscode?

    opened by lacmansoftware 4
  • prettier not work

    prettier not work

    prettier is not working.

    It always tell me that it cannot format 'xxx' files, like the pic below. prettier

    I've try my other projects, and they all work fine, so I do not think it is vscode error or prettier settings error.

    opened by kurt-liao 4
  • 构建问题


    构建过程异常的慢,暂时也没定位到原因,始终会卡几分钟。不一定是下图中的文件,每次构建总会卡几分钟,没有思路排查定位 image

    系统信息: 型号名称: MacBook Pro 型号标识符: MacBookPro17,1 型号: Z11F000BPCH/A 芯片: Apple M1 核总数: 8(4性能和4能效) 内存: 16 GB

    opened by pigW 3
  • windows 克隆下来 pnpm i 不成功

    windows 克隆下来 pnpm i 不成功

    windows11 nodejs 16.17 pnpm7.9.3 安装包报错以下错误 怎么解决呢

    no such file or directory, stat 'E:\project\test\eladmin\node_modules.pnpm\registry.npmmirror.com+@[email protected]\node_modules\execa'

    ` WARN  deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.  WARN  deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility  WARN  deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated  WARN  deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated  WARN  deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated  WARN  deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated Packages: +946 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  ENOENT  ENOENT: no such file or directory, stat 'E:\project\test\eladmin\node_modules.pnpm\registry.npmmirror.com+@[email protected]\node_modules\execa'

    pnpm: ENOENT: no such file or directory, stat 'E:\project\test\eladmin\node_modules.pnpm\registry.npmmirror.com+@[email protected]\node_modules\execa' Progress: resolved 966, reused 945, downloaded 0, added 0 PS E:\project\test\eladmin> `

    opened by qzzm 3
  • 部分页面打开时报错,例如引导页、综合示例-页面


    最新代码1.6.3,使用vscode正常执行pnpm install,pnpm run dev启动

    打开引导页面报错误: [vite] Internal server error: unplugin-vue-macros SyntaxError: Unexpected token (1:0) image

    打开综合示例-页面 和 多级菜单页面 报错误: [vite] Internal server error: unplugin-vue-macros Error: [@vue/compiler-sfc] SFC contains no