Skip to content


Repository files navigation

vue element-ui CircleCI PRs Welcome License: MIT Template from jarvis

English | ็ฎ€ไฝ“ไธญๆ–‡


vue-typescript-admin-template is a production-ready front-end solution for admin interfaces based on vue, typescript and UI Toolkit element-ui. The original Javascript version code vue-element-admin was written by PanJiaChen, many thanks to him for the awesome open source project! :)

If you want to get started with a minimal template code instead of integration solution, you can take a look at the minimal branch.



Live demo




Related Projects

Armour/vue-typescript-admin-mock-server (mock server for this project)

Armour/vue-typescript-admin-docs (documentation source for this project)

Javascript version:

PanJiaChen/vue-admin-template (a vue2.0 minimal admin template)

PanJiaChen/vue-element-admin (full features supported vue admin)

PanJiaChen/electron-vue-admin (a vue electron admin project)


- Login / Logout

- Permission Authentication
  - Page permission
  - Directive permission
  - Permission configuration page
  - Two-step login

- Multi-environment build
  - Dev / Stage / Prod

- Global Features
  - I18n
  - Dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
  - Tags-view (supports right-click operation)
  - Clipboard
  - Svg icons
  - Search
  - Screenfull
  - Settings
  - Mock data / Mock server
  - PWA support

- Components
  - Editors
    - Rich Text Editor
    - Markdown Editor
    - JSON Editor
  - Avatar Upload
  - Back To Top
  - CountTo
  - Dropzone
  - Draggable Dialog
  - Draggable Kanban
  - Draggable List
  - Draggable Select
  - ECharts
  - Mixin
  - SplitPane
  - Sticky

- Table
  - Dynamic Table
  - Draggable Table
  - Inline Edit Table
  - Complex Table

- Excel
  - Export Excel
  - Upload Excel
  - Excel Visualization

- Zip
  - Export zip

  - Download pdf

- Dashboard
- Guide Page
- Advanced Example Page
- Error Log
- Error Page
  - 401
  - 404


You need to install node and git locally. The project is based on typescript, vue, vuex, vue-router, vue-cli , axios and element-ui, all request data is simulated using faker.js. Understanding and learning these knowledge in advance will greatly help you on using this project.

Project Structure

โ”œโ”€โ”€ mock/                      # mock server & mock data
โ”œโ”€โ”€ public                     # public static assets (directly copied)
โ”‚   โ”‚โ”€โ”€ favicon.ico            # favicon
โ”‚   โ”‚โ”€โ”€ manifest.json          # PWA config file
โ”‚   โ””โ”€โ”€ index.html             # index.html template
โ”œโ”€โ”€ src                        # main source code
โ”‚   โ”œโ”€โ”€ api                    # api service
โ”‚   โ”œโ”€โ”€ assets                 # module assets like fonts, images (processed by webpack)
โ”‚   โ”œโ”€โ”€ components             # global components
โ”‚   โ”œโ”€โ”€ directives             # global directives
โ”‚   โ”œโ”€โ”€ filters                # global filter
โ”‚   โ”œโ”€โ”€ icons                  # svg icons
โ”‚   โ”œโ”€โ”€ lang                   # i18n language
โ”‚   โ”œโ”€โ”€ layout                 # global layout
โ”‚   โ”œโ”€โ”€ pwa                    # PWA service worker related files
โ”‚   โ”œโ”€โ”€ router                 # router
โ”‚   โ”œโ”€โ”€ store                  # store
โ”‚   โ”œโ”€โ”€ styles                 # global css
โ”‚   โ”œโ”€โ”€ utils                  # global utils
โ”‚   โ”œโ”€โ”€ views                  # views
โ”‚   โ”œโ”€โ”€ App.vue                # main app component
โ”‚   โ”œโ”€โ”€ main.ts                # app entry file
โ”‚   โ”œโ”€โ”€ permission.ts          # permission authentication
โ”‚   โ”œโ”€โ”€ settings.ts            # setting file
โ”‚   โ””โ”€โ”€ shims.d.ts             # type definition shims
โ”œโ”€โ”€ tests/                     # tests
โ”œโ”€โ”€ .circleci/                 # automated CI configuration
โ”œโ”€โ”€ .browserslistrc            # browserslist config file (to support Autoprefixer)
โ”œโ”€โ”€ .editorconfig              # editor code format consistency config
โ”œโ”€โ”€                   # env variable configuration
โ”œโ”€โ”€ .eslintrc.js               # eslint config
โ”œโ”€โ”€ babel.config.js            # babel config
โ”œโ”€โ”€ jest.config.js             # jest unit test config
โ”œโ”€โ”€ package.json               # package.json
โ”œโ”€โ”€ postcss.config.js          # postcss config
โ”œโ”€โ”€ tsconfig.json              # typescript config
โ””โ”€โ”€ vue.config.js              # vue-cli config

Project setup

With yarn or npm

Install dependencies

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build:prod

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Generate all svg components

yarn run svg

Customize Vue configuration

See Configuration Reference.

Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge
IE / Edge
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions




MIT License