befly-admin

Befly Admin

基于 Vue3 + TDesign Vue Next + JavaScript + Vite 的后台管理系统。

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TDesign Vue Next - 企业级设计体系
• JavaScript - 运行时语言
• Vite - 下一代前端构建工具
• SCSS - CSS 预处理器
• Vue Router - 路由管理
• Pinia - 状态管理
• unplugin-vue-components - 组件自动注册

特性

• ✅ 自动注册 TDesign 组件（无需手动注册）
• ✅ Vue Router / Pinia / Vue API 统一显式导入
• ✅ JavaScript
• ✅ SCSS 支持（全局变量 + Mixins）
• ✅ 响应式布局
• ✅ 路由权限控制
• ✅ 代理配置（开发环境）

开发

# 安装依赖
bun install

# 启动开发服务器
bun run dev

# 构建生产版本
bun run build

# 预览生产版本
bun run preview

# 类型检查
（已移除类型检查相关步骤）

项目结构

admin/
├── src/
│   ├── layouts/          # 布局组件
│   ├── views/            # 页面组件
│   │   ├── login/        # 登录页
│   │   └── dashboard/    # 仪表盘
│   ├── router/           # 路由配置
│   ├── styles/           # 全局样式
│   ├── types/            # 类型定义（如有）
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── index.html
├── vite.config.js        # Vite 配置
├── jsconfig.json         # JavaScript 配置
└── package.json

导入说明

API 导入

Vue、Vue Router、Pinia API 需要显式导入：

// ✅ 需要显式导入
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { defineStore } from "pinia";

// 然后再使用
const count = ref(0);
const router = useRouter();
const store = defineStore("main", {});

组件自动注册

TDesign 组件无需手动导入和注册：

<template>
    <!-- ✅ 直接使用，无需导入 -->
    <t-button>按钮</t-button>
    <t-input v-model="value" />
    <t-table :data="tableData" />
</template>

<script setup>
// ❌ 不需要这样写
// import { Button, Input, Table } from 'tdesign-vue-next';
</script>

配置说明

Vite 配置

• 组件自动注册配置: unplugin-vue-components
• 路径别名: @ 指向 src 目录
• 开发服务器: 端口 5173，自动打开浏览器
• 代理配置: /api 代理到 http://localhost:3000

JavaScript 配置

• 路径映射: @/* 映射到 src/*

构建

# 构建生产版本
bun run build

# 输出目录：dist/

构建优化：

• 代码分割（Vue、TDesign 单独打包）
• Tree-shaking
• 压缩优化
• Chunk size 限制：1500KB

注意事项

1. API 导入：Vue、Pinia、Vue Router API 需要显式导入
2. 登录功能：当前为模拟登录，需要对接真实 API
3. Token 存储：统一通过 @/plugins/store.js 中的 $Store.local 访问，底层默认使用 localStorage，生产环境建议使用更安全的方式
4. API 代理：开发环境 /api 代理到 http://localhost:3000

License

Apache-2.0