🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript

Overview

vue3-admin-ts

English | 中文

A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint

A new generation admin construct using vue3(setup-script)+vite2+element-plus ,It's fast!

Use eslint+prettier+gitHooks format and verification code to improve code standardization and development efficiency

Update log

//10-08
add error log collection func

Online experience

github address

Access address

国内体验地址:http://8.135.1.141/vue3-admin-ts

github 地址: https://github.com/jzfai/vue3-admin-ts.git

Demo

---- Let's look at the loading speed and the size of the built package first.:

template-speed-analysis

template-demo

Related items

The framework is available in js, ts and plus versions

development and experience:two words Really fragrant!!!!!

Documents

-- Efforts are being made to develop documents ......

You can refer to first:documentation of vue-admin-template

The difference with vue-admin-template

1.The layout method uses flex instead of the previous float, and the float layout method is completely removed, and some layout methods are optimized.

2.Use vue3 (setup-script) to write, replace webpack with vite2, add vue3's jsx writing method, vite2 is faster, use vue3 composition instead of vue2 option api writing, easier to maintain and migrate

3.Simplified some complex logic and optimized the design method of the architecture part

Comparison of performance between vue3 and vue2

  • 41% reduction in package size

  • The initial rendering is 55% faster, the update rendering is 133% faster

  • Memory reduction 54%

  • Use Proxy instead of defineProperty to implement data responsiveness

  • Rewrite the implementation of virtual DOM and Tree-Shaking

Comparison of packaging speed between vite2 and webpack

Build Setup

# clone the project
git clone https://github.com/jzfai/vue3-admin-ts.git

# enter the project directory
cd vue3-admin-ts

# install dependency(Recommend use yarn)
yarn

# develop
yarn run dev

using the browser to open http://localhost:5001

Build

# build for dev environment
yarn run build-serve

# build for production environment
yarn run  build

Others

# preview the dev environment effect
yarn run preview:build-serve

# preview the release environment effect
yarn run preview

# code format check
yarn run lint

Extra

Architecture development is not easy. If you feel good, please give me a compliment. The architecture is still being improved. Welcome to join me in development and become Contributors together! ! ! !

Browsers support

Note: Vue3 is not supported the Internet Explorer

Modern browsers and Internet Explorer 11+.

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge last 2 versions last 2 versions last 2 versions

Discussion and Communication

WeChat group

License

MIT license.

Copyright (c) 2021-present kuanghua

You might also like...
wt-vite-vue3-element-ruoyi-ts 若以 若依 typescript ts vue3 vue vite vite2.0 模版

wt-vite-vue3-element-ruoyi-ts 🎉 全网首发 🎉 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 Project setup npm i -g

🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin 🎉 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案
Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案

Naive Ui Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目,相信不管是从新技术使用还是其他方面,都能帮助到你。

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

An open source admin template kit using vite2
An open source admin template kit using vite2

ABT:admin base template English | 中文 Introduction admin-base-template is a free and open source admin template kit. using vite2. Technology stack is V

element-plus and vue3 admin box.
element-plus and vue3 admin box.

vue-admin-box是一个免费并且开源的中后台管理系统模板

Brisk-Admin 是一个基于 Vue3.0、Vite、 element-plus、JavaScript的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务页面,包括二次封装组件、动态路由菜单、国际化、动态换肤等功能,它可以帮助你快速搭建中后台项目,该项目使用最新的前端技术栈,使用javascript语法保留了对不熟悉typescript语法用户的友好,同时框架很适合轻松上手使用,希望给你带来帮助。
Brisk-Admin 是一个基于 Vue3.0、Vite、 element-plus、JavaScript的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务页面,包括二次封装组件、动态路由菜单、国际化、动态换肤等功能,它可以帮助你快速搭建中后台项目,该项目使用最新的前端技术栈,使用javascript语法保留了对不熟悉typescript语法用户的友好,同时框架很适合轻松上手使用,希望给你带来帮助。

简介 Brisk-Admin 是一个基于 Vue3.0、Vite、 element-plus、JavaScript的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务页面,包括二次封装组件、动态路由菜单、国际化、动态换肤等功能,它可以帮助你快速搭建中后台项目,该项目使用最新的前端技术栈,使

Laravel Vue Admin is a beautiful dashboard combination of Laravel, Vue3 and the UI Toolkit Element Plus.

Laravel Vue Admin Laravel Vue Admin is a beautiful dashboard combination of Laravel, Vue3 and the UI Toolkit Element Plus. Getting started Installing

Releases(v2.0.2)
  • v2.0.2(Dec 21, 2022)

  • v2.0.0(Nov 21, 2022)

    update log

    Features

    optimize the login permission and code

    remove next() hook for permission.js file

    promote the first into page speed in 'dev env'

    optimize the layout code

    optimize eslint and typescript config according by element-plus

    optimize the i18n func

    optimize the theme func

    Dependencies Update

    "eslint": "8.18.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-define-config": "1.5.1",
    "eslint-plugin-eslint-comments": "3.2.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsonc": "^2.3.0",
    "eslint-plugin-markdown": "^3.0.0",
    "eslint-plugin-prettier": "4.1.0",
    "eslint-plugin-unicorn": "^43.0.2",
    "eslint-plugin-vue": "9.1.1",
    "husky": "7.0.2",
    "jsdom": "16.4.0",
    "jsonc-eslint-parser": "^2.1.0"
    

    v2.0.0 is faster, simpler and better

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc2(Nov 19, 2022)

    1. optimize the login permission and code

    2. remove next() hook for permission.js file

    3. promote the first into page speed in 'dev env'

    4. optimize the layout code

    5. optimize eslint and typescript config according by element-plus

    Source code(tar.gz)
    Source code(zip)
  • v1.9.3(Sep 12, 2022)

    update log

    Features

    remove jest install of vitest

    add theme of china red

    change some ts config in "tsconfig.json"

    Bug fixes

    fix jzfai#65

    Dependencies Update

    remove:

        "jest": "<27",
        "ts-jest": "<27",
        "tslib": "^2.4.0",
        "vue-jest": "^5.0.0-alpha.10",
        "@babel/preset-env": "^7.17.10",
        "@types/jest": "<27",
        "@vue/test-utils": "^2.0.0-rc.18",
        "babel-jest": "<27",
        "jest-serializer-vue": "^2.0.2",
        "jest-transform-stub": "^2.0.0",
        "@babel/preset-typescript": "7.16.7",
        "ts-node": "10.7.0"
    

    add

      "devDependencies": {
        "@vitest/coverage-c8": "^0.22.1",
        "@vitest/ui": "^0.22.1",
        "vitest": "^0.22.1",
        "@vue/test-utils": "^2.0.2",
        "resize-observer-polyfill": "^1.5.1",
        "jsdom": "16.4.0"
       }  
      "scripts": {
        "vitest": "vitest --ui",
        "coverage": "vitest run --coverage"
      },
    
    Source code(tar.gz)
    Source code(zip)
  • v1.9.1(Aug 16, 2022)

    update log

    Features

    import mkcert you can using https in localhost

    import unocss help for you using css

    remove vite-plugin-vue-setup-extend-plus install of unplugin-vue-define-options

    Improve first render speed in development environment

    Adapt to [email protected]

    pr Tinymce 6.10

    pr feat:ScreenLock

    Bug fixes

    fix the peerDependencies warning when installing

    Dependencies Update

    "vite-plugin-mkcert": "^1.7.2",
    "unplugin-vue-define-options": "^0.6.1",
    "unocss": "^0.33.5"
    
    Source code(tar.gz)
    Source code(zip)
  • v1.8.1(Jul 17, 2022)

  • 1.6.1(Jun 12, 2022)

    update log

    v1.6.1

    Features

    添加表格排序使用例子(sortablejs) 体验一下

    锁定pnpm版本 "packageManager": "[email protected]"

    "packageManager": "[email protected]",
    "scripts": {
    "preinstall": "npx only-allow pnpm"
    }
    

    锁定node版本 14到18

    "engines": {
    "node": ">= 14<18"
    }
    

    替换访问链接为https 体验一下

    Bug fixes

    修复侧边栏当路径有参数时无法选中问题(fullPath改成path)

    Dependencies Update

    "vue": "3.2.37",
    "pinia": "2.0.14",
    "vite": "2.9.12",
    "@element-plus/icons-vue": "2.0.4",
     "element-plus": "2.2.5",
    "js-error-collection": "^1.0.7",
    

    如有需要请进行依赖替换升级

    How to migrate Element Plus

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • v1.5.5(May 4, 2022)

    update log

    v1.5.5

    Features

    add the vue3+vite2 unit-test func

    Bug fixes

    • change the "vite-plugin-vue-setup-extend" plugin to "vite-plugin-vue-setup-extend-plus" and then fix the issue of debug
    • remove the key prop of three level keep-alive container in order to fix the multi call the onMounted when the three level keep-alive
    • fix .husky about pre-commit no breaking when the eslint has error

    devDependencies of unit-test

     "jest": "<27",
     "ts-jest": "<27",
     "tslib": "^2.4.0",
     "vue-jest": "^5.0.0-alpha.10",
     "@babel/preset-env": "^7.17.10",
     "@types/jest": "<27",
     "@vue/test-utils": "^2.0.0-rc.18",
     "babel-jest": "<27",
     "jest-serializer-vue": "2.0.2",
     "jest-transform-stub": "2.0.0"
    

    How to migrate Element Plus

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Apr 3, 2022)

    update log

    v1.5.0

    Features

    **update the vuex4 to vuex5(pinia2.x) **

    Bug fixes

    • fix the error of errorLog.vue http://8.135.1.141/vue3-admin-plus/#/error-log/list

    devDependencies

    //update
    "vite": "2.9.1",
    "element-plus": "2.1.7",
    

    How to migrate

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • v1.4.5(Mar 18, 2022)

    update log

    v1.4.5

    Features

    **add the demo of worker **

    Bug fixes

    • fix the error of errorLog.vue http://8.135.1.141/vue3-admin-plus/#/error-log/list

    devDependencies

    //update
    "vite": "~2.8.6",
    "element-plus": "~2.1.4",
    

    How to migrate

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • v1.4.3(Mar 8, 2022)

    update log

    v1.4.3

    Features

    **add the sub menu scss var config **

    Bug fixes

    • fix the error of errorLog.vue http://8.135.1.141/vue3-admin-plus/#/error-log/list

    devDependencies

    //update
    "vite": "~2.8.6",
    "element-plus": "~2.0.5",
    

    How to migrate

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • 1.4.1(Feb 18, 2022)

    update log

    v1.4.1

    Features

    **add three level router keep-alive **

    add element-plus svg icon use component , register it to global

    Bug fixes

    • fix the error of errorLog.vue http://8.135.1.141/vue3-admin-plus/#/error-log/list

    devDependencies

    //update
    "vite": "2.8.4",
    "element-plus": "^2.0.2",
    "vue": "3.2.31",
    

    How to migrate

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • v1.4.0(Feb 7, 2022)

    update log

    v1.4.0

    Features

    update element-plus version to 2.0.1 release version

    remove the mixin instance of hooks and proxy key using

    import the "unplugin-auto-import unplugin-vue-components" plugin to auto import the "Dependencies" such as "vue"

    Bug fixes

    • fix the error of errorLog.vue http://8.135.1.141/vue3-admin-plus/#/error-log/list

    devDependencies

    //update
    "vite": "2.7.13",
    "element-plus": "2.0.1",
    "vue": "3.2.29",
    
     //add
     "unplugin-auto-import": "0.5.11",
     "unplugin-vue-components": "0.17.14",
     "vite-plugin-vue-setup-extend": "0.4.0",
    

    How to migrate

    See how to migrate from ElementUI to Element Plus in our dedicated discussion:

    Source code(tar.gz)
    Source code(zip)
  • v1.3.5(Jan 11, 2022)

  • v1.3.1(Dec 13, 2021)

    v1.3.1

    Features

    • vite.config.js

           /*
           * "/vue3-admin-plus" nginx deploy folder
           * detail to look https://vitejs.cn/config/#base
           * */
          base: `/${packageJson.name}/`,
         //add assetsDir rollupOptions config   
         build: {
            minify: 'terser',
            brotliSize: false,
            chunkSizeWarningLimit: 2000,
            //remote console.log in prod
            terserOptions: {
              compress: {
                drop_console: true,
                drop_debugger: true
              }
            },
            //build assets Separate
            assetsDir: 'static/assets',
            rollupOptions: {
              output: {
                chunkFileNames: 'static/js/[name]-[hash].js',
                entryFileNames: 'static/js/[name]-[hash].js',
                assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
              }
            }
          }, 
      

      . add vscode recommend config -> .vscode folder

      . add image upload and Add watermark demo, you can look for

    Bug fixes

    • fix https://github.com/jzfai/vue3-admin-plus/issues/16

    Refactors

    • remove vite.config.js extensions , Adapted to vite 2.4.1, so you need add .vue extension when import file, why remove it you can look for https://github.com/vitejs/vite/issues/6026

         resolve: {
            alias: {
              '~': resolve(__dirname, './'),
              '@': resolve(__dirname, 'src')
            }
            //remove it 
            //extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
          },
      
    • in hooks Folder , rename the file name start with use.. , Adapted to hook writing specification

      ├── hooks                       
      │   ├── useErrorLog.js
      

    │   ├── useTablePage.js │   ├── useTest.js

    
    
    version update
    
    ```json
    vue 3.2.25
    vite 2.4.1
    element-plus 1.2.0-beta.6
    
    Source code(tar.gz)
    Source code(zip)
  • v1.2.2(Nov 11, 2021)

    //11-11 update element-plus vite2 vue3 version ,add func of element-svg icon for side menu add domo of 'import export download template' in CRUD

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Oct 9, 2021)

  • v1.1.9(Oct 8, 2021)

  • v1.1.5(Oct 3, 2021)

🚀A new generation Cross-desktop framework using electron13+vue3(setup-script)+vite2+element-plus

vue3-admin-electron English | 中文 This is a basic vue3 admin electron desktop platform. Contains the most basic electron development and construction s

kuanghua 3 Nov 25, 2022
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

??????vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

good luck 13.4k Jan 1, 2023
👏A magical vue3 admin using vue3(script-setup) + vite2 + element-plus

vue3-admin-plus English | 中文 vue3 admin plus provides enterprise-level development demo A new generation admin construct using vue3(setup-script)+vite

kuanghua 625 Jan 7, 2023
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus + typescript 的后台管理系统vue3-element-admin-ts

vue3-element-admin-ts ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 v

雪月欧巴 92 Nov 16, 2022
vue3.0 + vite2.0 + element-plus + Vuex4.0 + Vue-router4.0 + axios + node-server(前后端分离)

Explain Vite2.0, Vue3.0, ElementPlus, Vuex4.0, Vue-router4.0, Axios Development Explain 路由,api,vuex,模块所用图片 请根据模块进行划分,添加方式请参考当前目录结构 Project setup npm

hell 18 Sep 28, 2022
vue3.0 + vite2.0 + element-plus + Vuex4.0 + Vue-router4.0 + axios + node-server(前后端分离)

Explain Vite2.0, Vue3.0, ElementPlus, Vuex4.0, Vue-router4.0, Axios Development Explain 路由,api,vuex,模块所用图片 请根据模块进行划分,添加方式请参考当前目录结构 Project setup npm

hell 18 Sep 28, 2022
A set of background integration scheme based on vue3, element plus, typesscript4 and vite2

vue-element-plus-admin English | 中文 Introduction vue-element-plus-admin is a free and open source middle and background template based on element-plus

Archer 772 Jan 6, 2023
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 15.5k Jan 1, 2023
基于Vue3 + Element Plus + Vite2 构建的后台模板

Mojito Admin Mojito Admin 是一个基于 Vue3、 Element Plus、Vite 构建的后台管理系统模板,开箱即用,无过度封装,也可以用于学习参考。 预览 Demo 文档地址 文档 截图 特性 使用最新的Vue3、Vite2、Element Plus 等前端新技术开发

moell 30 Dec 23, 2022