阿超 > vue-pure-admin

vue-pure-admin

2026-01-11

前端

在今天和明天之间，有一段很长的时间；趁你还有精神的时候，学习迅速办事。——歌德

来一篇“有点松弛又真有料”的前端模板解读：vue-pure-admin —— 一套全面基于 ESM + Vue3 + Vite + Element-Plus + TypeScript 编写的后台管理系统（兼容移动端）。仓库地址：pure-admin/vue-pure-admin，官方文档主页在这儿：纯净后台模板站点。

一句话（来自仓库 description）：全面 ESM + Vue3 + Vite + Element-Plus + TypeScript 编写的一款后台管理系统（兼容移动端）。

先把“核心卖点”丢给你：

  • 技术栈：Vue3 + Vite + Element Plus + TypeScript，全 ESM
  • 状态管理：Pinia
  • 样式生态：Tailwind CSS + SCSS
  • 模板属性：is_template=true（可直接用作脚手架模板）
  • 移动端兼容：自适应布局与 UI 选择适配移动端
  • 许可证：MIT（放心用、好二开）
  • 官方站点与文档：https://pure-admin.github.io/vue-pure-admin

语言构成（来自仓库统计，按出现量粗略排序）：

  • Vue、TypeScript 为主力
  • SCSS、HTML、CSS、JavaScript 辅助
  • 还有 Shell、Dockerfile 等工程化文件

项目结构（节选，源于一次性接口结果，可能不完整；更多请直接浏览根目录视图）

为什么它“好用”

  • Vue3 + TS 的语法与类型体验，让管理系统开发更稳
  • Vite 的���致冷/热重载速度 + ESM，一旦用过就回不去
  • Element Plus 组件丰富，后台常见场景开箱即用
  • Pinia 简洁，逻辑与类型更清爽
  • 模板化结构明确：开发、构建、部署、国际化、Mock、样式、校验全在位

快速上手（保守版，尽量不乱编）

  • 先看 README：README.md
  • 然后：
    1. 克隆仓库
    2. 安装依赖（推荐 pnpm，或按 README 指定的包管理器）
    3. 启动开发服务
  • 常见命令（��� package.json 为准）：
    • 安装：pnpm install
    • 开发：pnpm dev
    • 构建：pnpm build
    • 预览：pnpm preview
  • 环境变量：
    • 仓库提供了 .env.development、.env.production、.env.staging 等文件，按需修改

上点代码小例子（安全、通用、贴栈，不对仓库内部路径做死板假设；你可以按自己的目录结构放置）

示例 A：一个最小化 Pinia Store（类型安全）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// name=src/stores/user.ts
import { defineStore } from "pinia";

interface UserState {
  id?: string;
  name?: string;
  roles: string[];
}

export const useUserStore = defineStore("user", {
  state: (): UserState => ({
    id: undefined,
    name: undefined,
    roles: []
  }),
  getters: {
    isAdmin: (state) => state.roles.includes("admin")
  },
  actions: {
    setUser(payload: Partial<UserState>) {
      Object.assign(this, payload);
    },
    logout() {
      this.$reset();
    }
  }
});

示例 B：一个路由配置（Vue Router + TS，支持权限元信息）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// name=src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    redirect: "/dashboard"
  },
  {
    path: "/dashboard",
    name: "Dashboard",
    meta: { title: "仪表盘", requiresAuth: true },
    component: () => import("@/views/dashboard/index.vue")
  },
  {
    path: "/login",
    name: "Login",
    meta: { title: "登录" },
    component: () => import("@/views/login/index.vue")
  }
];

export const router = createRouter({
  history: createWebHistory(),
  routes
});

// 可在 main.ts 中挂载 router.beforeEach，基于 meta.requiresAuth 做权限拦截

示例 C：一个典型的 Vue3 + Element Plus 页面组件（搭配 Tailwind）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- name=src/views/dashboard/index.vue -->
<template>
  <div class="p-6 space-y-4">
    <el-card shadow="hover">
      <template #header>
        <div class="flex items-center justify-between">
          <span>欢迎回来 👋</span>
          <el-button type="primary" @click="refresh">刷新数据</el-button>
        </div>
      </template>
      <div class="grid gap-4 md:grid-cols-2">
        <el-statistic :value="stats.users" title="用户数" />
        <el-statistic :value="stats.orders" title="订单数" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const stats = ref({ users: 0, orders: 0 });
const refresh = () => {
  // 这里模拟请求；真实环境请接入你的 API
  stats.value = { users: Math.round(Math.random() * 1000), orders: Math.round(Math.random() * 100) };
};
</script>

<style scoped>
/* 如果你更偏爱 SCSS，这里也可以写成 lang="scss" */
</style>

示例 D：一个 API 封装（Fetch + 拦截 + 类型）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// name=src/services/http.ts
export interface ApiResult<T = unknown> {
  code: number;
  message: string;
  data: T;
}

const BASE_URL = import.meta.env.VITE_API_BASE_URL || "/api";

export async function request<T>(input: RequestInfo, init?: RequestInit): Promise<ApiResult<T>> {
  const resp = await fetch(typeof input === "string" ? `${BASE_URL}${input}` : input, {
    headers: { "Content-Type": "application/json" },
    ...init
  });

  if (!resp.ok) {
    throw new Error(`HTTP ${resp.status}`);
  }

  // 这里假设后端统一返回 { code, message, data } 结构
  return resp.json() as Promise<ApiResult<T>>;
}

示例 E：一个最小 main.ts（注册 Pinia、Router、Element Plus）

1
2
3
4
5
6
7
8
9
10
11
12
13
// name=src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import { router } from "./router";

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(ElementPlus);
app.mount("#app");

工程化与最佳实践（走向稳定）

  • 类型优先：组件 props、路由 meta、Store 状态都写清 TS 类型
  • 权限与路由：在 router.beforeEach 做登录态、角色路由守卫，配合 Pinia 存储用户信息
  • 国际化：locales 目录已在仓库；建议统一文案抽取与切换逻辑
  • Mock & 环境：mock + .env 组合，保证本地开发可预演生产接口的返回形态
  • 样式系统：Tailwind 用于快速布局，SCSS 用于主题/变量管理；配合 PostCSS 与 Stylelint 保持风格一致
  • 构建与容器：Vite 构建 + Dockerfile 可用于镜像化部署；生产环境建议加上静态资源缓存策略

更多必读链接

最后的提醒与说明

  • 以上目录清单来自一次性接口结果，可能不完整；请使用 GitHub 文件视图获取更全面信息（数据源为 /repos/pure-admin/vue-pure-admin/contents/）
  • 许可证为 MIT，二次开发与商用前请遵循相关条款

用一句话收个尾：如果你正在找一套“现代化、类型友好、工程化到位”的后台管理模板，vue-pure-admin 值得你直接拉起一条开发分支试一下——把 Pinia、Element Plus、Tailwind、Vite 的快乐，都装进你的日常工作流里。