vue-pure-admin：开源中后台管理系统模板，Vue3+Element-Plus打造开箱即用解决方案-CSDN博客

vue-pure-admin：开源中后台管理系统模板，Vue3+Element-Plus打造开箱即用解决方案

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin

前言：中后台开发的痛点与解决方案

你是否还在为中后台系统搭建重复编写基础架构？是否因技术选型混乱导致后期维护困难？是否面临UI组件库与业务逻辑整合的繁琐工作？vue-pure-admin作为一款开源免费的中后台管理系统模板，基于Vue3、Element-Plus和TypeScript技术栈，提供了开箱即用的解决方案，帮助开发者快速构建企业级管理系统。

读完本文后，你将获得：

掌握vue-pure-admin的核心架构与技术亮点
学会如何快速初始化项目并进行定制开发
了解系统内置功能模块的使用方法
掌握高级特性如动态路由、权限管理的实现原理
获取性能优化与生产部署的最佳实践

一、技术架构与核心特性

1.1 技术栈选型

vue-pure-admin采用现代化前端技术栈，主要包括：

技术	版本	说明
Vue	^3.4.27	前端框架
TypeScript	^5.4.5	类型系统
Vite	^5.2.12	构建工具
Element-Plus	^2.7.3	UI组件库
Pinia	^2.1.7	状态管理
Tailwindcss	^3.4.3	CSS框架
Vue-Router	^4.3.2	路由管理

1.2 系统架构设计

系统采用分层架构设计，确保代码的可维护性和可扩展性：

mermaid

1.3 核心特性概览

vue-pure-admin提供了丰富的企业级特性：

模块化设计：功能按业务领域划分为独立模块，便于团队协作开发
响应式布局：自适应不同屏幕尺寸，支持PC端与移动端
主题定制：内置光明/暗黑主题，支持自定义主题颜色
国际化支持：多语言切换，满足全球化业务需求
权限管理：基于RBAC模型的细粒度权限控制
动态路由：根据用户权限动态生成路由表
组件库：丰富的业务组件，如表格、表单、图表等
性能优化：代码分割、懒加载、缓存策略等优化手段

二、快速上手：环境搭建与项目初始化

2.1 环境准备

在开始之前，请确保你的开发环境满足以下要求：

Node.js: ^18.18.0 || ^20.9.0 || >=21.1.0
pnpm: >=9

2.2 项目克隆与安装

推荐使用官方提供的脚手架工具@pureadmin/cli快速创建项目：

# 全局安装脚手架
npm install -g @pureadmin/cli

# 交互式选择模板并创建项目
pure create

或者直接从Git仓库克隆：

# 克隆项目
git clone https://gitcode.com/gh_mirrors/vue/vue-pure-admin.git

# 进入项目目录
cd vue-pure-admin

# 安装依赖
pnpm install

2.3 项目启动与预览

# 开发环境启动
pnpm dev

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

启动成功后，访问 http://localhost:9527 即可看到系统登录界面。

2.4 项目目录结构

src/
├── api/           # API请求
├── assets/        # 静态资源
├── components/    # 公共组件
├── config/        # 配置文件
├── directives/    # 自定义指令
├── layout/        # 布局组件
├── plugins/       # 插件配置
├── router/        # 路由配置
├── store/         # 状态管理
├── style/         # 全局样式
├── utils/         # 工具函数
└── views/         # 页面组件

三、核心功能模块详解

3.1 路由管理

系统采用Vue-Router进行路由管理，支持动态路由生成。路由配置位于src/router目录下：

// src/router/index.ts 核心代码
export const router: Router = createRouter({
  history: getHistoryMode(import.meta.env.VITE_ROUTER_HISTORY),
  routes: constantRoutes.concat(...(remainingRouter as any)),
  strict: true,
  scrollBehavior(to, from, savedPosition) {
    return new Promise(resolve => {
      if (savedPosition) {
        return savedPosition;
      } else {
        if (from.meta.saveSrollTop) {
          const top: number =
            document.documentElement.scrollTop || document.body.scrollTop;
          resolve({ left: 0, top });
        }
      }
    });
  }
});

路由守卫实现了权限控制、进度条显示等功能：

// 路由前置守卫
router.beforeEach((to: ToRouteType, _from, next) => {
  if (to.meta?.keepAlive) {
    handleAliveRoute(to, "add");
  }
  
  NProgress.start();
  
  // 权限判断逻辑
  if (Cookies.get(multipleTabsKey) && userInfo) {
    // 有权限，正常跳转
    toCorrectRoute();
  } else {
    // 无权限，跳转登录页
    whiteList.includes(to.fullPath) ? next() : next({ path: "/login" });
  }
});

3.2 状态管理

系统使用Pinia进行状态管理，按功能模块划分不同的store：

// src/store/modules/app.ts 示例
export const useAppStore = defineStore({
  id: "pure-app",
  state: (): appType => ({
    sidebar: {
      opened: storageLocal().getItem<StorageConfigs>(
        `${responsiveStorageNameSpace()}layout`
      )?.sidebarStatus ?? getConfig().SidebarStatus,
      withoutAnimation: false,
      isClickCollapse: false
    },
    layout: storageLocal().getItem<StorageConfigs>(
      `${responsiveStorageNameSpace()}layout`
    )?.layout ?? getConfig().Layout,
    device: deviceDetection() ? "mobile" : "desktop",
    viewportSize: {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }
  }),
  getters: {
    getSidebarStatus(state) {
      return state.sidebar.opened;
    },
    getDevice(state) {
      return state.device;
    }
  },
  actions: {
    TOGGLE_SIDEBAR(opened?: boolean, resize?: string) {
      // 实现侧边栏展开/折叠逻辑
    },
    toggleDevice(device: string) {
      this.device = device;
    }
  }
});

3.3 权限控制

系统基于RBAC(Role-Based Access Control)模型实现权限控制，主要通过以下方式：

路由权限控制：在路由元信息中配置角色权限

// 路由配置示例
{
  path: '/system',
  name: 'System',
  component: Layout,
  meta: {
    title: '系统管理',
    icon: 'system',
    roles: ['admin', 'system'], // 该路由需要的角色
    alwaysShow: true
  },
  children: [
    // 子路由...
  ]
}

指令权限控制：通过自定义指令控制按钮等元素的显示

// src/directives/auth/index.ts
import type { App, Directive } from "vue";
import { usePermissionStoreHook } from "@/store/modules/permission";

function isAuth(el: Element, binding: any) {
  const { value } = binding;
  const permissionStore = usePermissionStoreHook();
  const roles = permissionStore.userRoles;

  if (Array.isArray(value) && value.length > 0) {
    const hasPermission = roles.some(role => {
      return value.includes(role);
    });

    if (!hasPermission) {
      el.parentNode?.removeChild(el);
    }
  } else {
    throw new Error("need roles! Like v-auth=\"['admin','editor']\"");
  }
}

const authDirective: Directive = {
  mounted(el, binding) {
    isAuth(el, binding);
  },
  updated(el, binding) {
    isAuth(el, binding);
  }
};

export function setupPermissionDirective(app: App) {
  app.directive("auth", authDirective);
}

在模板中使用：

<el-button v-auth="['admin']" type="primary">仅管理员可见</el-button>

3.4 UI组件库

系统使用Element-Plus作为基础UI组件库，并按需引入以减小打包体积：

// src/plugins/elementPlus.ts
import type { App, Component } from "vue";
import {
  ElButton,
  ElTable,
  ElInput,
  // 其他组件...
  ElLoading,
  ElMessage
} from "element-plus";

const components = [
  ElButton,
  ElTable,
  ElInput
  // 其他组件...
];

const plugins = [
  ElLoading,
  ElMessage
];

export function useElementPlus(app: App) {
  // 全局注册组件
  components.forEach((component: Component) => {
    app.component(component.name, component);
  });
  
  // 全局注册插件
  plugins.forEach(plugin => {
    app.use(plugin);
  });
}

3.5 网络请求

系统对Axios进行了封装，提供统一的请求处理：

// src/utils/http/index.ts
class PureHttp {
  constructor() {
    this.httpInterceptorsRequest();
    this.httpInterceptorsResponse();
  }

  /** 请求拦截 */
  private httpInterceptorsRequest(): void {
    PureHttp.axiosInstance.interceptors.request.use(
      async (config: PureHttpRequestConfig): Promise<any> => {
        // 开启进度条动画
        NProgress.start();
        
        // Token处理逻辑
        const data = getToken();
        if (data) {
          const now = new Date().getTime();
          const expired = parseInt(data.expires) - now <= 0;
          if (expired) {
            // Token过期刷新逻辑
            if (!PureHttp.isRefreshing) {
              PureHttp.isRefreshing = true;
              useUserStoreHook()
                .handRefreshToken({ refreshToken: data.refreshToken })
                .then(res => {
                  const token = res.data.accessToken;
                  config.headers["Authorization"] = formatToken(token);
                  PureHttp.requests.forEach(cb => cb(token));
                  PureHttp.requests = [];
                })
                .finally(() => {
                  PureHttp.isRefreshing = false;
                });
            }
            return PureHttp.retryOriginalRequest(config);
          } else {
            config.headers["Authorization"] = formatToken(data.accessToken);
          }
        }
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
  }
  
  // 其他方法...
}

export const http = new PureHttp();

使用示例：

// src/api/user.ts
import { http } from "@/utils/http";
import type { LoginParams, LoginResult } from "./types";

export const loginApi = (params: LoginParams) => {
  return http.post<LoginResult>("/login", { params });
};

export const getUserInfo = () => {
  return http.get("/getUserInfo");
};

四、高级特性与自定义开发

4.1 主题定制

系统支持主题切换功能，包括内置的光明/暗黑主题，以及自定义主题颜色：

mermaid

实现原理：通过修改CSS变量实现主题切换，核心代码位于src/layout/hooks/useDataThemeChange.ts。

4.2 多语言支持

系统内置国际化支持，使用vue-i18n实现多语言切换：

// src/plugins/i18n.ts
import { createI18n } from "vue-i18n";
import { storageLocal } from "@pureadmin/utils";
import { useAppStoreHook } from "@/store/modules/app";

// 导入语言包
import enUS from "@/locales/en.yaml";
import zhCN from "@/locales/zh-CN.yaml";

const appStore = useAppStoreHook();

const defaultLocale = storageLocal().getItem<LocaleType>("locale") || appStore.language;

export const i18n = createI18n({
  legacy: false,
  locale: defaultLocale,
  fallbackLocale: "zh-CN",
  messages: {
    "en-US": enUS,
    "zh-CN": zhCN
  },
  availableLocales: ["zh-CN", "en-US"],
  sync: true,
  silentTranslationWarn: true,
  missingWarn: false,
  silentFallbackWarn: true
});

export function useI18n() {
  return i18n;
}

export const t = i18n.global.t;

export const transformI18n = (key: string) => {
  return t(key);
};

4.3 自定义组件

系统提供了丰富的自定义组件，如可拖拽表格、图片裁剪、富文本编辑器等：

// src/components/ReCropper/index.ts
import type { App } from "vue";
import ReCropper from "./src/index.vue";

export const ReCropper = Object.assign(ReCropper, {
  install: (app: App) => {
    app.component(ReCropper.name, ReCropper);
  }
});

export default ReCropper;

使用示例：

<template>
  <re-cropper
    v-model="imageUrl"
    :aspect-ratio="1"
    :min-width="200"
    :min-height="200"
    @crop-success="handleCropSuccess"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import ReCropper from "@/components/ReCropper";

const imageUrl = ref("");

const handleCropSuccess = (url: string) => {
  console.log("裁剪成功", url);
};
</script>

五、性能优化与部署

5.1 性能优化策略

5.1.1 代码分割与懒加载

系统使用Vue的异步组件和路由懒加载功能：

// 路由懒加载
const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/index.vue'),
    meta: { title: '仪表盘', icon: 'dashboard' }
  }
];

5.1.2 资源优化

使用CDN加载第三方库
图片懒加载与压缩
开启Gzip/Brotli压缩

// vite.config.ts 中配置CDN
export default ({ mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      // 其他插件...
      cdnImport({
        modules: [
          {
            name: "vue",
            var: "Vue",
            path: "https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js",
          },
          {
            name: "element-plus",
            var: "ElementPlus",
            path: "https://cdn.jsdelivr.net/npm/element-plus@2.7.3/dist/index.full.min.js",
            css: "https://cdn.jsdelivr.net/npm/element-plus@2.7.3/dist/index.css",
          },
        ],
      }),
      
      // 压缩配置
      compression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: "gzip",
        ext: ".gz",
      }),
    ]
  };
};

5.2 生产环境部署

5.2.1 构建优化

// package.json 构建脚本
{
  "scripts": {
    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build && generate-version-file",
    "build:staging": "rimraf dist && vite build --mode staging",
    "report": "rimraf dist && vite build --report"
  }
}

5.2.2 Docker部署

系统提供Docker支持，可快速部署到服务器：

# Dockerfile
FROM node:18-alpine as build

WORKDIR /app

COPY package*.json ./

RUN npm install pnpm -g && pnpm install

COPY . .

RUN pnpm build

FROM nginx:alpine

COPY --from=build /app/dist /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

构建和运行Docker镜像：

# 构建镜像
docker build -t vue-pure-admin .

# 运行容器
docker run -dp 8080:80 --name pure-admin vue-pure-admin

六、总结与展望

vue-pure-admin作为一款企业级中后台管理系统模板，提供了完整的解决方案，帮助开发者快速构建高质量的管理系统。其主要优势包括：

开箱即用：无需从零开始搭建项目架构，直接基于模板开发业务功能
技术领先：采用最新的前端技术栈，确保系统的先进性和可维护性
功能完善：内置丰富的企业级特性，满足各类管理系统需求
性能优化：经过优化的构建配置和代码分割策略，确保系统性能
易于扩展：模块化设计和插件化架构，便于功能扩展和定制

未来，vue-pure-admin将继续跟进前端技术发展趋势，不断优化用户体验，增加更多实用功能，如低代码表单构建、可视化大屏等，为开发者提供更强大的工具支持。

附录：常用开发资源

如果觉得本项目对你有帮助，请给我们一个Star支持！你的支持是我们持续开发的动力。

本文档内容基于vue-pure-admin v5.7.0版本编写，随着版本迭代可能会有变化，请以官方文档为准。

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考