Robot Admin 快速上手指南

📋 环境准备

在开始之前，请确保已安装以下工具：

🔧

Git

版本控制工具

🚀

Bun

推荐包管理器

📦 快速安装

使用 Bun (推荐)使用 pnpm使用 npm

bash

# 1. 克隆仓库
git clone https://github.com/ChenyCHENYU/Robot_Admin.git

# 2. 进入项目目录
cd Robot_Admin

# 3. 安装依赖 (极速体验)
bun install

# 4. 启动开发服务器
bun dev

bash

# 1. 克隆仓库
git clone https://github.com/ChenyCHENYU/Robot_Admin.git

# 2. 进入项目目录
cd Robot_Admin

# 3. 安装依赖
pnpm install

# 4. 启动开发服务器
pnpm dev

bash

# 1. 克隆仓库
git clone https://github.com/ChenyCHENYU/Robot_Admin.git

# 2. 进入项目目录
cd Robot_Admin

# 3. 安装依赖
npm install

# 4. 启动开发服务器
npm run dev

🎉

启动成功！

开发服务器将在 http://localhost:1988 上运行

首次启动 <2秒，热更新 <100毫秒

⚙️ 开发命令

核心开发命令

命令	描述	使用场景
`bun dev`	🔥 启动开发服务器	日常开发，支持热重载
`bun build`	📦 生产环境构建	部署到生产环境
`bun build:test`	🧪 测试环境构建	部署到测试环境
`bun build:staging`	🚀 预发布环境构建	部署到预发布环境
`bun preview`	👀 预览生产构建	本地验证生产版本

代码质量命令

命令	描述	推荐频率
`bun lint`	✨ ESLint 检查和修复	提交前必做
`bun format`	🎨 Prettier 代码格式化	保存时自动
`bun test:unit`	🧪 运行单元测试	开发完成后
`bun type:check`	🛡️ TypeScript 类型检查	构建前验证
`bun type-watch`	👀 类型检查监视模式	开发过程中

📁 项目结构

Robot Admin 采用清晰的模块化架构，便于维护和扩展：

📂 点击查看完整目录结构

src/
├── 📂 api/          # 按领域组织的API请求
├── 📂 assets/       # 静态资源（图片、全局CSS）
├── 📂 axios/        # Axios配置和请求处理
├── 📂 components/   # 可复用的Vue组件
│   ├── global/      # 全局组件（30+ 核心组件）
│   └── local/       # 局部组件
├── 📂 composables/  # Vue组合函数
├── 📂 config/       # 应用配置
├── 📂 hooks/        # 常用功能的自定义钩子
├── 📂 plugins/      # 插件设置和配置
├── 📂 router/       # Vue Router配置
├── 📂 stores/       # Pinia状态管理
├── 📂 styles/       # 全局样式和主题配置
├── 📂 types/        # TypeScript类型定义
├── 📂 utils/        # 实用函数
├── 📂 views/        # 页面组件
└── 📄 main.ts       # 应用程序入口

🏗️
关注点分离
清晰的目录结构，易于导航和维护

🔧
模块化设计
按功能域组织，便于团队协作

📈
可扩展性
支持从单体到微前端的演进

🔧 应用程序引导

Robot Admin 采用结构化的初始化流程，确保所有依赖项在应用启动前正确加载：

main.ts 启动流程App.vue 根组件

typescript

async function bootstrap() {
  // 第一阶段：非Vue相关的初始化
  setupLoading();

  // 第二阶段：创建Vue实例，初始化Pinia
  const app = createApp(App);
  const pinia = createPinia();
  pinia.use(piniaPluginPersistedstate);

  // 使用去除滚动警告的插件
  app.use(PassiveScrollPlugin);

  // 使用路由
  app.use(router);

  // 第三阶段：Vue相关插件
  setupStore(app);
  setupNaiveUI(app);
  setupDynamicComponents(app);
  setupHighlight(app);
  setupMarkdown(app);
  setupDirectives(app);
  setupAnalytics(app);

  // 第四阶段：异步插件
  await router.isReady();

  // 最终挂载
  app.mount("#app");
}

// 启动应用
bootstrap().catch((error) => console.error("应用启动失败:", error));

vue

<template>
  <NConfigProvider
    :theme="themeStore.currentTheme"
    :theme-overrides="themeStore.themeOverrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
    class="global-config-provider"
  >
    <NLoadingBarProvider>
      <NDialogProvider>
        <NNotificationProvider>
          <NMessageProvider>
            <RouterView />
          </NMessageProvider>
        </NNotificationProvider>
      </NDialogProvider>
    </NLoadingBarProvider>
  </NConfigProvider>
</template>

<script setup lang="ts">
import { zhCN, dateZhCN } from "naive-ui/es"; // 中文语言包
import { useThemeStore } from "@/stores/theme";
import { onMounted } from "vue";

const themeStore = useThemeStore();

// 初始化主题
onMounted(() => {
  themeStore.init();
});
</script>

这种结构化方法确保在应用程序启动前所有依赖项都已正确初始化。

🎯 开发指南

1. 🎨 探索演示页面

Robot Admin 包含 30+ 精心制作的演示页面，展示各种功能和组件：

📋

表单页面

动态表单、验证、布局

📊

数据展示

表格、图表、统计面板

🎛️

系统管理

用户、权限、配置

🔧

工具页面

文件处理、导入导出

2. 🔐 权限系统

实现了完整的 RBAC（基于角色的访问控制）系统：

菜单级权限 - 控制页面访问
按钮级权限 - 控制操作权限
API 级权限 - 控制接口调用
动态路由 - 基于权限动态生成

3. 🌈 主题定制

支持多种主题模式：

主题配置使用示例

javascript

// 支持的主题模式
const themes = {
  light: "浅色模式", // 默认主题
  dark: "深色模式", // 深色主题
  auto: "跟随系统", // 自动切换
};

vue

<template>
  <div class="theme-switcher">
    <n-switch v-model:value="isDark" @update:value="toggleTheme">
      <template #checked>🌙</template>
      <template #unchecked>☀️</template>
    </n-switch>
  </div>
</template>

4. 🧩 内置组件

充分利用 30+ 内置组件 加速开发：

组件类型	数量	主要功能
📋 表单组件	8+	动态表单、验证、布局
📊 数据组件	6+	表格、图表、统计
✏️ 编辑器	4+	富文本、代码、Markdown
🛠️ 工具组件	12+	文件处理、导入导出

🔧 故障排除

遇到问题时的解决步骤：

🚨 常见问题

如果在设置过程中遇到任何问题，请按以下顺序排查：

1. 更新工具版本

bash

# 更新 Bun 到最新版本
bun upgrade

# 检查 Node.js 版本
node --version  # 应该 >= 20.0.0

2. 清理依赖缓存

bash

# 清理并重新安装
rm -rf node_modules
rm -rf .vite
bun install

3. 检查端口占用

bash

# 如果1988端口被占用，指定其他端口
bun dev --port 8888

4. 查看详细错误

bash

# 启用详细日志
DEBUG=* bun dev

💡 获取帮助

如果问题依然存在，请：

查看 GitHub Issues
提交详细的错误报告
参考项目文档获取更多信息

🎉 开发愉快！

通过这份快速入门指南，您应该能够：

✅

在几分钟内成功启动 Robot Admin

✅

了解项目结构和开发命令

✅

掌握基本的开发工作流程

✅

准备好构建强大的管理界面

🎯 期待共建

如果这个项目对你有帮助，请给个 Star ⭐️ 支持一下！

Robot Admin 快速上手指南 ​

🚀 几分钟内启动您的企业级管理后台

📋 环境准备 ​

📦 快速安装 ​

⚙️ 开发命令 ​

核心开发命令 ​

代码质量命令 ​

📁 项目结构 ​

🔧 应用程序引导 ​

🎯 开发指南 ​

1. 🎨 探索演示页面 ​

2. 🔐 权限系统 ​

3. 🌈 主题定制 ​

4. 🧩 内置组件 ​

🔧 故障排除 ​

1. 更新工具版本 ​

2. 清理依赖缓存 ​

3. 检查端口占用 ​

4. 查看详细错误 ​

🎉 开发愉快！ ​

🎯 期待共建

Robot Admin 快速上手指南

📋 环境准备

📦 快速安装

⚙️ 开发命令

核心开发命令

代码质量命令

📁 项目结构

🔧 应用程序引导

🎯 开发指南

1. 🎨 探索演示页面

2. 🔐 权限系统

3. 🌈 主题定制

4. 🧩 内置组件

🔧 故障排除

1. 更新工具版本

2. 清理依赖缓存

3. 检查端口占用

4. 查看详细错误

🎉 开发愉快！