Xto Demo

基于 xto 组件库的后台管理系统脚手架。

特性

• 🚀 Vue 3 + TypeScript + Vite 5
• 📦 Pinia 状态管理
• 🛣️ Vue Router 4 动态路由
• 🎨 xto 组件库
• 🔐 权限管理（角色、按钮级别）
• 🌓 亮色/暗色主题切换
• 📱 响应式布局

项目结构

src/
├── api/                # API 接口
├── assets/             # 静态资源
│   └── styles/         # 全局样式
├── components/         # 全局组件
│   └── Layout/         # 布局组件
├── composables/        # 组合式函数
├── directives/         # 自定义指令
├── enums/              # 枚举常量
├── router/             # 路由配置
├── stores/             # Pinia 状态
├── types/              # 类型定义
├── utils/              # 工具函数
└── views/              # 页面视图

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建（应用模式 - 用于本地测试）
pnpm build

# 构建（库模式 - 用于 npm 发布）
pnpm build:lib

发布到 npm

# ⚠️ 重要：必须使用 build:lib 构建库产物

# 1. 构建库产物
pnpm run build:lib

# 2. 验证构建产物（确保包含 index.es.js 和 index.umd.js）
ls dist/

# 3. 更新版本号（修改 package.json 中的 version）

# 4. 发布
npm publish --access public

# 5. 提交代码
git add -A && git commit -m "chore: 发布 xto-fronted x.x.x"
git push origin main

功能模块

• [x] 登录/登出
• [x] 动态路由
• [x] 侧边栏菜单
• [x] 顶部导航/面包屑
• [x] 标签页缓存
• [x] 仪表盘
• [x] 用户管理 CRUD
• [x] 角色管理
• [x] 菜单管理
• [x] 主题切换
• [x] 权限控制

Mock 数据

项目使用本地 Mock 数据，可直接登录测试：

• 用户名：任意
• 密码：任意

技术栈

| 技术 | 版本 | |------|------| | Vue | 3.4+ | | TypeScript | 5.4+ | | Vite | 5.x | | Vue Router | 4.x | | Pinia | 2.x | | Axios | 1.x | | xto | npm |

License

MIT