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

简介: 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/


首页控制台

微信图片_20230706151512.png微信图片_20230706151516.png



接口文档

微信图片_20230706151520.png



权限管理系统

微信图片_20230706151550.png微信图片_20230706151552.png微信图片_20230706151555.png微信图片_20230706151558.png


扩展生态

微信图片_20230706151637.png

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


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


项目指南

功能清单

微信图片_20230706151651.png


技术栈&官网

技术栈 描述 官网

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

环境准备


名称

备注

开发工具

VSCode 下载 -

-

运行环境

Node 16+ 下载

微信图片_20230706151715.png

VSCode插件(必装)

插件市场搜索 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 安装,且禁用 Vetur

微信图片_20230706151719.png





项目的初始化


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

微信图片_20230706151821.png



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


npm install

npm run dev

微信图片_20230706151833.png



浏览器访问 localhost:5173 预览

微信图片_20230706151845.png



路径别名配置

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


Vite 配置

微信图片_20230706151857.png



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  

安装插件依赖

微信图片_20230706151918.png微信图片_20230706151952.png微信图片_20230706152005.png微信图片_20230706152008.png

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 自动

微信图片_20230706152030.png



整合 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



效果预览

微信图片_20230706152050.png

相关文章
|
15天前
|
存储 JavaScript 开发者
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
14 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
|
15天前
|
JavaScript API 网络架构
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
8 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
|
15天前
|
JavaScript API UED
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
14 0
|
JavaScript
vite-Vue的无捆绑开发服务
vite-Vue的无捆绑开发服务
99 0
|
4天前
|
JavaScript
|
5天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
20 6
|
3天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
16 2
|
5天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
21 4
|
5天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
14 1
|
5天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
18 1