Vue 3.3 + Vite 4.3 + TypeScript 5+ Element-Plus：从零到一构建企业级后台管理系统（前后端开源）（一）

vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案，技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。

相较于其他管理前端框架，vue3-element-admin 的优势在于一有一无 (有配套后端、无复杂封装)：

配套完整 Java 后端 权限管理系统，开箱即用，提供 OpenAPI 文档 搭配 Apifox 生成 Node、Python、Go等其他服务端代码；

完全基于 vue-element-admin 升级的 Vue3 版本，没有对框架(Element Plus)的组件再封装，上手成本低和扩展性高。

前言

本篇是 vue3-element-admin v2.x 版本从 0 到 1，相较于 v1.x 版本 主要增加了对原子CSS(UnoCSS)、按需自动导入、暗黑模式的支持。

项目预览

在线预览

https://vue3.youlai.tech/

首页控制台

接口文档

权限管理系统

扩展生态

youlai-mall 有来开源商城：Spring Cloud微服务+ vue3-element-admin+uni-app

youlai-mall 商品管理 mall-app 移动端

项目指南

功能清单

技术栈&官网

技术栈 描述 官网

Vue3 渐进式 JavaScript 框架 https://cn.vuejs.org/

Element Plus 基于 Vue 3，面向设计师和开发者的组件库 https://element-plus.gitee.io/zh-CN/

Vite 前端开发与构建工具 https://cn.vitejs.dev/

TypeScript 微软新推出的一种语言，是 JavaScript 的超集 https://www.tslang.cn/

Pinia 新一代状态管理工具 https://pinia.vuejs.org/

Vue Router Vue.js 的官方路由 https://router.vuejs.org/zh/

wangEditor Typescript 开发的 Web 富文本编辑器 https://www.wangeditor.com/

Echarts 一个基于 JavaScript 的开源可视化图表库 https://echarts.apache.org/zh/

vue-i18n Vue 国际化多语言插件 https://vue-i18n.intlify.dev/

VueUse 基于Vue组合式API的实用工具集(类比HuTool工具) http://www.vueusejs.com/

前/后端源码

Gitee Github

前端 vue3-element-admin vue3-element-admin

后端 youlai-boot youlai-boot

接口文档

接口调用地址：https://vapi.youlai.tech

接口文档地址：在线接口文档

OpenAPI 3.0 文档地址：http://vapi.youlai.tech/v3/api-docs

环境准备

项目的初始化

npm init vite@latest vue3-element-admin --template vue-ts

**vue3-element-admin **: 自定义的项目名称

vue-ts ： vue + typescript 模板的标识，查看 create-vite 以获取每个模板的更多细节：vue，vue-ts，react，react-ts

初始化完成项目位于 D:\project\demo\vue3-element-admin , 使用 VSCode 导入，执行以下命令启动：

npm install

npm run dev

浏览器访问 localhost:5173 预览

路径别名配置

相对路径别名配置，使用 @ 代替 src

Vite 配置

TypeScirpt 编译器配置

// tsconfig.json

"compilerOptions": {

   ...

   "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录

   "paths": { // 路径映射，相对于baseUrl

    "@/*": ["src/*"]

   }

}

路径别名使用

// src/App.vue

import HelloWorld from '/src/components/HelloWorld.vue'

     ↓

import HelloWorld from '@/components/HelloWorld.vue'

安装自动导入

Element Plus 官方文档中推荐 按需自动导入 的方式，而此需要使用额外的插件 unplugin-auto-import 和 unplugin-vue-components 来导入要使用的组件。所以在整合 Element Plus 之前先了解下自动导入的概念和作用

概念

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。

插件 概念 自动导入对象

unplugin-auto-import 按需自动导入API ref，reactive,watch,computed 等API

unplugin-vue-components 按需自动导入组件 Element Plus 等三方库和指定目录下的自定义组件

看下自动导入插件未使用和使用的区别：

插件名 未使用自动导入 使用自动导入

unplugin-auto-import  

unplugin-vue-components  

安装插件依赖

npm install -D unplugin-auto-import unplugin-vue-components

1

vite.config.ts - 自动导入配置

新建 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件

import AutoImport from "unplugin-auto-import/vite";

import Components from "unplugin-vue-components/vite";

plugins: [

 AutoImport({

   // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等

   imports: ["vue"],

   eslintrc: {

     enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false

     filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件

   },

   dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径

 }),

 Components({

   dts: path.resolve(pathSrc, "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径

 }),

]

.eslintrc.cjs - 自动导入函数 eslint 规则引入

"extends": [

   "./.eslintrc-auto-import.json"

],

1

2

3

tsconfig.json - 自动导入TS类型声明文件引入

{

 "include": ["src/**/*.d.ts"]

}

1

2

3

自动导入效果

运行项目 npm run dev 自动

整合 Element Plus

参考： element plus 按需自动导入

需要完成上面一节的 自动导入 的安装和配置

安装 Element Plus

npm install element-plus

1

安装自动导入 Icon 依赖

npm i -D unplugin-icons

1

vite.config.ts 配置

参考： element-plus-best-practices - vite.config.ts

// vite.config.ts

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import Icons from "unplugin-icons/vite";

import IconsResolver from "unplugin-icons/resolver";

export default ({ mode }: ConfigEnv): UserConfig => {

 return {

   plugins: [

     // ...

     AutoImport({

       // ...  

       resolvers: [

         // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)

         ElementPlusResolver(),

         // 自动导入图标组件

         IconsResolver({}),

       ]

       vueTemplate: true, // 是否在 vue 模板中自动导入

       dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts') // 自动导入组件类型声明文件位置，默认根目录

       

     }),

     Components({

       resolvers: [

         // 自动导入 Element Plus 组件

         ElementPlusResolver(),

         // 自动注册图标组件

         IconsResolver({

           enabledCollections: ["ep"] // element-plus图标库，其他图标库 https://icon-sets.iconify.design/

         }),

       ],

       dts: path.resolve(pathSrc, "types", "components.d.ts"), //  自动导入组件类型声明文件位置，默认根目录

     }),

     Icons({

       // 自动安装图标库

       autoInstall: true,

     }),

   ],

 };

};

示例代码

 Success

 Info

 Warning

 Danger

效果预览