【源码】基于 Vue 3、TypeScript 和 Vite 的后台管理系统

项目简介

本项目是基于 Vue 3、TypeScript、Vite、Element Plus 和 Tailwind CSS 构建的后台管理系统。参考大量后台开源项目，聚焦核心“用户权限”功能，通过本地 /public/data 模拟接口返回，可轻松适配 Java、PHP、NodeJS 等不同后台。代码仅封装基础功能，纯净且便于自定义改造，适用于接私活或外包。

项目的主要特性和功能

1. 代码规范与格式化：借助 eslint 规范代码，prettierrc 实现自动格式化。
2. 模拟数据：利用本地模拟接口返回数据，便于与不同后台对接。
3. 组件封装：对 Element Plus 的 table 进行二次封装，实现页面自适应。
4. 原子 CSS 类：运用 Tailwind CSS 提供的原子类样式，如字体颜色、大小、背景颜色、内外边距等。
5. TS 提示：api 接口字段提供 TS 提示，提升开发效率。
6. 功能封装：封装 axios，提供基础工具类、全局组件自动声明、Vue 全局函数和全局工具函数。
7. 语法支持：支持 tsx 语法。
8. 路由缓存：默认开启路由缓存，可通过 KeepAlive 配置是否缓存。

安装使用步骤

安装依赖

在项目根目录下，使用以下命令安装项目所需依赖： bash npm install yarn install

运行项目

安装完成后，运行以下命令启动项目： bash vite 在浏览器中访问 http://localhost:3000 即可查看项目效果。若需开发调试，可运行： bash vite -- --mode development

Tailwind CSS 插件安装

安装 vscode 专用插件：Tailwind CSS IntelliSense，以方便使用原子 CSS 类。具体安装可参考 Tailwind 官方安装文档。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】