T-Design Starter Next

基于 Vue 3 + TypeScript + Vite + TDesign 构建的现代化企业级前端项目模板。

本项目基于腾讯官方的 tdesign-vue-next-starter 进行改造和优化，在保持原有功能的基础上，增加了更多现代化的开发特性和工具支持。

🌟 特性

• ⚡ Vue 3 - 使用 Composition API 和 <script setup> 语法
• 🔧 TypeScript - 完整的类型支持，提升开发体验
• 📦 Vite - 极速的热重载和构建工具
• 🎨 TDesign - 腾讯开源的企业级设计语言和 Vue 组件库
• 🎯 UnoCSS - 原子化 CSS 引擎，高性能且灵活
• 🌍 Vue I18n - 国际化支持
• 📱 响应式设计 - 支持多种设备尺寸
• 🛡️ 权限管理 - 完整的用户权限控制系统
• 🗂️ 文件管理 - 规范的项目结构和模块划分

🎯 在线预览

👀 项目预览地址

📋 环境要求

• Node.js 22+
• pnpm 8+

🚀 快速开始

# 如果使用 nvm，切换到所需的 Node.js 版本
nvm use 22

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev

# 构建测试环境
pnpm run build:test

# 构建生产环境
pnpm run build

# 预览构建结果
pnpm run preview

📁 项目结构

src/
├── api/              # API 接口定义
├── assets/           # 静态资源
├── components/       # 公共组件
├── config/           # 全局配置
├── hooks/            # 自定义 hooks
├── layouts/          # 布局组件
├── locales/          # 国际化文件
├── pages/            # 页面组件
├── router/           # 路由配置
├── store/            # 状态管理 (Pinia)
├── style/            # 全局样式
├── types/            # TypeScript 类型定义
└── utils/            # 工具函数

🔧 技术栈

核心框架

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集，提供静态类型检查
• Vite - 下一代前端构建工具

UI 组件库

• TDesign Vue Next - 腾讯开源的企业级设计语言
• TDesign Icons - 配套图标库

状态管理

• Pinia - Vue 3 官方推荐的状态管理库
• Pinia Plugin Persistedstate - 状态持久化插件

路由管理

• Vue Router 4 - Vue 3 官方路由管理器

工具库

• VueUse - Vue 组合式 API 工具集
• Axios - HTTP 客户端
• Vue I18n - 国际化解决方案

样式解决方案

• UnoCSS - 原子化 CSS 引擎
• PostCSS - CSS 后处理器
• PostCSS Nesting - CSS 嵌套语法支持

开发工具

• ESLint - 代码质量检查
• Vue DevTools - Vue 开发者工具

🎨 样式方案

原子化 CSS (UnoCSS)

项目使用 UnoCSS 作为原子化 CSS 引擎，提供高性能且灵活的样式解决方案。

PostCSS

使用 PostCSS 及其插件来处理 CSS，支持嵌套语法等现代 CSS 特性。

/* 支持 CSS 嵌套 */
.card {
  padding: 1rem;

  &:hover {
    background: #f5f5f5;
  }

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }
}

🌍 国际化

项目内置国际化支持，支持中文简体、中文繁体、英文等多种语言。

通过 useLocale 组合式函数可以轻松实现语言切换和文本翻译功能。

🛡️ 权限管理

项目内置完整的权限管理系统，支持：

• 用户登录/登出
• 路由权限控制
• 按钮级权限控制
• 角色管理

📦 构建部署

# 构建生产环境
pnpm run build

# 预览构建结果
pnpm run preview

构建产物将输出到 dist 目录，可直接部署到静态文件服务器。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT