Xto Demo

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

特性

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

安装

# npm
npm install xto-fronted

# pnpm
pnpm add xto-fronted

# yarn
yarn add xto-fronted

快速开始

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

// 初始化 xto-fronted
import { createXtoApp } from 'xto-fronted'

createXtoApp({
  appName: '我的应用',
  baseUrl: 'https://api.example.com',
  appId: 'MY-APP-ID',
  clientId: 'MY-CLIENT-ID',
  indexPath: '/dashboard',
  loginPath: '/login'
})

// 样式
import 'xto-fronted/style.css'
import '@xto/base/es/style.css'
import '@xto/form/es/style.css'
import '@xto/feedback/es/style.css'
import '@xto/navigation/es/style.css'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

// router/index.ts
import { createRouter, createLayoutRoute, Login, NotFound } from 'xto-fronted'

const businessRoutes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/index.vue'),
    meta: { title: '仪表盘', icon: 'dashboard' }
  }
]

const layoutRoute = createLayoutRoute(businessRoutes, { indexPath: '/dashboard' })

const routes = [
  { path: '/login', name: 'Login', component: Login },
  layoutRoute,
  { path: '/:pathMatch(.*)*', redirect: '/404' }
]

export default createRouter(routes)

<!-- App.vue -->
<script setup>
import { useAppStore } from 'xto-fronted'
const appStore = useAppStore()
</script>

<template>
  <div class="app" :class="{ dark: appStore.isDark }">
    <router-view />
  </div>
</template>

示例项目

查看 example 目录获取完整的示例项目。

# 在根目录安装依赖（包含 example）
pnpm install

# 运行示例项目
cd example
pnpm dev

项目结构

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

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

推送仓库

pnpm install

# 1. 构建（库模式）
pnpm run build:lib

# 2. 登录 npm（首次需要）
npm login

# 3. 发布
npm publish

功能模块

• [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 |

更新日志

查看 CHANGELOG.md 获取版本更新记录。

License

MIT