基于 Vue 3、Vite 和 TDesign Mobile Vue 的移动端项目，旨在帮助您快速启动一个功能完备、遵循最佳实践的移动端应用。
请确保您的开发环境已安装 Node.js (推荐 v18 或更高版本)。
-
克隆或下载项目
-
安装依赖
npm install -
启动开发服务器
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 类型检查。
About
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
