Vue3 Composition Admin 使用教程

项目介绍

vue3-composition-admin 是一个基于 Vue3、TypeScript 和 Element-Plus 的管理端模板解决方案。该项目采用 Composition API 风格编写，旨在提供一个现代化的前端开发框架，支持多种功能和组件，如权限验证、国际化、主题切换等。项目的基础版本源自于花裤衩大佬的 vue-element-admin，并在此基础上进行了升级和优化。

项目快速启动

克隆项目

首先，克隆项目到本地：

git clone https://github.com/RainManGO/vue3-composition-admin.git

进入项目目录

cd vue3-composition-admin

安装依赖

使用 Yarn 或 npm 安装项目依赖：

yarn
# 或者
npm install

启动开发服务器

yarn start
# 或者
npm run start

应用案例和最佳实践

用户管理

在 vue3-composition-admin 中，用户管理是一个核心功能。通过权限验证和动态路由加载，可以实现细粒度的用户权限控制。以下是一个简单的用户管理示例：

// src/views/user/UserList.vue
<template>
  <div>
    <el-table :data="users">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="role" label="角色" />
    </el-table>
  </div>
</template>

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

const users = ref([
  { name: '张三', role: '管理员' },
  { name: '李四', role: '用户' },
]);
</script>

国际化

项目支持国际化，可以通过配置 vue-i18n 实现多语言切换。以下是一个简单的国际化示例：

// src/locales/en.ts
export default {
  message: {
    hello: 'hello world',
  },
};

// src/locales/zh.ts
export default {
  message: {
    hello: '你好，世界',
  },
};

典型生态项目

RuoYi-Vue3

RuoYi-Vue3 是一个基于 vue3-composition-admin 的后端路由案例项目，提供了完整的前后端分离解决方案。

微应用乾坤版本

RuoYi-Vue3-qinkun 是 RuoYi-Vue3 的微应用版本，采用了乾坤框架，支持微前端架构。

通过这些生态项目，vue3-composition-admin 不仅提供了一个强大的前端模板，还构建了一个丰富的技术生态系统，帮助开发者快速构建和部署复杂的应用。