TDesign Mobile Vue Starter Community

基于 Vue 3、Vite 和 TDesign Mobile Vue 的移动端项目，旨在帮助您快速启动一个功能完备、遵循最佳实践的移动端应用。

请确保您的开发环境已安装 Node.js (推荐 v18 或更高版本)。

1. 克隆或下载项目

2. 安装依赖

   npm install
   

3. 启动开发服务器

   npm run dev
   

   服务启动后，您可以在浏览器中访问对应的地址来查看应用。

在 package.json 文件中定义了以下常用脚本：

• npm run dev: 启动 Vite 开发服务器，用于本地开发和调试。
• npm run build: 使用 vue-tsc 进行类型检查并打包项目，生成生产环境代码。
• npm run preview: 在本地预览生产环境构建后的应用。
• npm run lint: 使用 ESLint 检查代码规范。
• npm run lint:fix: 使用 ESLint 自动修复代码规范问题。

项目的核心代码位于 src 目录下，遵循模块化的组织方式。

.
├───public/               # 静态资源目录，此目录下的文件不会被 Vite 处理
├───src/
│   ├───assets/           # 存放图片、字体、全局样式等静态资源
│   ├───components/       # 存放可复用的全局公共组件
│   ├───router/           # 存放 Vue Router 的路由配置
│   ├───stores/           # 存放 Pinia store，用于全局状态管理
│   ├───views/            # 存放应用的页面级组件，通常按功能模块划分
│   │   ├───auth/         # 认证（登录、注册）
│   │   ├───data/         # 数据图表
│   │   ├───home/         # 应用主页
│   │   ├───messages/     # 消息中心
│   │   ├───publish/      # 内容发布
│   │   ├───search/       # 搜索
│   │   ├───settings/     # 设置
│   │   └───UserCenter/   # 用户个人中心
│   ├───App.vue           # Vue 应用的根组件
│   └───main.ts           # 应用的入口文件，用于初始化 Vue 实例
├───index.html            # 应用的 HTML 入口文件
├───package.json          # 定义项目依赖和脚本命令
├───vite.config.ts        # Vite 配置文件
└───tsconfig.json         # TypeScript 配置文件

本项目采用了一系列现代化的前端技术和工具，以提升开发效率和代码质量。

• Vue 3: 渐进式 JavaScript 框架。
• Vue Router: Vue.js 的官方路由管理器。
• TDesign Mobile Vue: 腾讯出品的移动端 UI 组件库。
• TypeScript: JavaScript 的超集，提供静态类型检查。

• Vite: 新一代前端构建工具。
• ESLint: 代码检查工具。
  • @antfu/eslint-config: 编码规范。
• Vite 插件:
  • @vitejs/plugin-vue: 使 Vite 支持 Vue 单文件组件。
  • unplugin-auto-import: 自动按需导入 API。
  • unplugin-vue-components: 自动按需导入 Vue 组件。
  • unplugin-vue-router: 基于文件系统的路由。

• vue-tsc: 用于在命令行中对 Vue 单文件组件进行 TypeScript 类型检查。