返回 导航

Vue.js

hangge.com

Vue.js - 后台管理系统模板项目推荐3（Vue Pure Admin、新手友好、轻量全能）

作者：hangge | 2026-09-16 09:25
    Vue Pure Admin 是专为新手开发者和中小型项目打造，基于主流 Element Plus 开发，兼顾稳定性与易用性，是入门学习、毕业设计、小型商业项目的最优解之一。下面我将从零开始，演示 Vue Pure Admin 的环境配置、项目安装、启动运行、以及基础功能使用。

三、 Vue Pure Admin（新手友好、轻量全能）

1，基本介绍

（1）Vue Pure Admin 是一款基于 Vue3 + Vite5 + TypeScript + Element Plus + Pinia 构建的现代化开源中后台管理系统模板，以轻量化、高性能、高自定义性为核心特点，内置完整的权限管理、动态路由、主题切换、多标签页、Mock 接口等企业级常用功能，摒弃冗余代码，兼顾开发效率与项目可维护性，是目前主流的中后台快速开发解决方案。

（2）它还有一个精简版本，实际项目开发更推荐用精简版本。精简版本是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于 2.3MB，并且会永久同步完整版的代码。开启 brotli 压缩和 cdn 替换本地库模式后，打包大小低于 350kb。

2，核心技术栈

  • 核心框架：Vue3（组合式 API + TSX）
  • 构建工具：Vite5（极速热更新、打包速度远超 Webpack）
  • 语言：TypeScript（强类型约束，减少线上 bug）
  • UI 组件库：Element Plus
  • 状态管理：Pinia（Vuex 替代方案，更轻量简洁）
  • 路由管理：Vue Router4
  • 请求封装：Axios
  • 模拟接口：vite-plugin-fake-server（本地无需后端即可调试）

3，项目优缺点

（1）优点：
  • 极简架构，剔除冗余功能，保留后台核心能力，项目轻量化、启动速度快
  • Element Plus 生态成熟，组件齐全、问题解决方案多，踩坑成本极低
  • 支持精简版完整版切换，可按需引入模块，适配不同规模项目
  • 内置 Mock 接口、常用表单表格、上传、图表组件，开箱即用
（2）缺点：
  • 定制化高级功能较少，不适合超大型复杂业务系统

4，准备工作

（1）首先需求安装 Node.js，并且官方要求 Node.js 20.19.0 及以上版本，我们只需要访问其官网下载安装即可。

（2）同时项目只支持使用 pnpm 进行依赖安装，我们还需要执行如下命令安装 pnpm：
npm i -g pnpm

（3）安装完毕可以通过 pnpm -v 命令进行验证：

5，下载项目

（1）在 CMD 终端种执行如下命令克隆代码，然后进入项目：
git clone https://github.com/pure-admin/vue-pure-admin.git
cd vue-pure-admin

（2）整个项目的核心目录结构如下： 
vue-pure-admin
├── .env / .env.development  # 环境变量配置（开发/生产/预发布）
├── vite.config.ts           # Vite构建配置
├── package.json             # 项目依赖、脚本命令
├── types/                   # 全局TS类型定义（src外层，全局通用）
├── mock/                    # 全局Mock模拟接口配置
├── public/                  # 静态公共资源（不参与打包编译）
└── src                      # 核心源码目录
    ├── App.vue              # 项目根组件（全局入口根页面）
    ├── main.ts              # 项目入口文件
    ├── api/                 # 所有后端接口请求封装
    ├── assets/              # 静态资源（图片、字体、全局样式）
    ├── components/          # 全局公共封装组件（表格、弹窗、表单等）
    ├── config/               # 全局配置（项目标题、路由、权限默认配置）
    ├── directives/          # 自定义全局指令（权限、防抖、复制等）
    ├── layout/              # 系统布局组件（侧边栏、顶部导航、标签页）
    ├── plugins/             # 第三方插件注册（Element Plus、图标、axios等）
    ├── router/              # 路由配置（静态路由、动态路由、路由守卫）
    ├── store/               # Pinia状态管理（用户、权限、主题、标签页）
    ├── utils/               # 通用工具函数（请求封装、权限判断、日期处理）
    └── views/               # 业务页面存放目录（所有功能页面）

（3）然后再项目目录下执行如下命令安装依赖： 
pnpm install

6，启动项目

（1）执行如下命令可启动开发服务器。
pnpm dev

（2）使用浏览器访问，默认显示登录页：

（3）登录后内页显示效果如下：

（4）切换成深色模式效果如下：

7，打包与部署

（1）开发完成后，执行如下打包命令，生成可部署的静态资源。打包完成后，项目根目录会生成 dist 文件夹，即为最终部署文件。
pnpm build

（2）执行如下命令可以本地预览打包文件。通过本地验证打包后的项目是否正常运行，可以避免部署后出现报错。 
pnpm preview

（3）项目根目录下有个 Dockerfile 文件，可以执行如下命令创建一个自定义镜像名为 vue-pure-admin 的镜像。
docker build -t vue-pure-admin .
docker run -dp 8080:80  --name pure-admin vue-pure-admin

附：配置并使用真实的后端 API 地址

（1）Vue Pure Admin 默认启用本地 Mock 接口实现免后端调试，由于项目所有模拟接口由 vite-plugin-fake-server 驱动，如果需要对接真实接口必须将 build/plugins.ts 中的 vitePluginFakeServer 相关代码注释将其关闭，否则请求会一直走本地模拟数据。
// mock支持
// vitePluginFakeServer({
//   logger: false,
//   include: "mock",
//   infixName: false,
//   enableProd: true
// }),

（2）接着在 .env.development、.env.production 文件中添加 VITE_BASE_API 配置，指向直接请求的后端完整地址。 
VITE_BASE_API = "http://localhost:8080"

（3）修改 src/utils/http/index.ts，添加 baseURL 相关配置即可。 
const defaultConfig: AxiosRequestConfig = {
  baseURL: import.meta.env.VITE_BASE_API,  // 使用环境变量
  // 请求超时时间
  timeout: 10000,
  headers: {
    Accept: "application/json, text/plain, */*",
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest"
  },
  // 数组格式参数序列化（https://github.com/axios/axios/issues/5142）
  paramsSerializer: {
    serialize: stringify as unknown as CustomParamsSerializer
  }
};
评论

全部评论（0）

回到顶部