logo
0
0
Login
切符<KIPPUDESU@OUTLOOK.com>
docs: update project introduction

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 配置文件

技术栈概览

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

核心框架与库

构建与开发工具

  • 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 类型检查。