logo
0
0
WeChat Login
Forkfromtencent/tdesign/tdesign-mobile-vue-starter-community, aheadmain13 commits, behindmain3 commits

t-design

1.目录结构


.
├── .github/                  # GitHub 自动化配置(workflow 工作流)
├── .husky/                   # Git 钩子配置(提交/推送阶段触发脚本)
│   └── pre-commit            # 提交前校验(格式化、lint 等)
├── .vscode/                  # VSCode 编辑器专属配置(代码格式化、插件推荐等)
├── dist/                     # 打包产物目录(npm run build 后生成,存放可部署的静态资源)
├── node_modules/             # 第三方依赖包存储(自动生成,勿手动修改)
├── public/                   # 静态资源目录(部署时会直接拷贝,不参与编译)
├── src/                      # 核心源代码目录
│   ├── assets/               # 静态资源
│   │   └── images/           # 图片资源(图标、背景图等)
│   ├── components/           # 通用 UI 组件(可跨页面复用)
│   │   ├── Footer.vue        # 页脚组件
│   │   └── Header.vue        # 页眉组件
│   ├── pages/                # 页面级组件(对应路由页面)
│   │   ├── 404.vue           # 404 页面
│   │   ├── index.vue         # 首页
│   │   ├── Login.vue         # 登录页
│   │   ├── Message.vue       # 消息页
│   │   ├── Profile.vue       # 个人主页
│   │   └── Setting.vue       # 设置页
│   ├── router                # 路由配置,管理页面路由规则
│   │   ├── index.ts          # 核心配置,定义路由映射、守卫
│   │   └── typed-router.d.ts # 路由类型定义,供 TypeScript 提示
│   │   └── vite-env.d.ts     # 浏览器环境类型定义,供 TypeScript 提示
│   ├── styles/               # 全局样式
│   │   ├── index.css         # 通用 CSS 样式(可选)
│   │   ├── index.less        # 通用 Less 样式(主题、全局布局等)
│   │   ├── reset.css         # 浏览器默认样式重置
│   │   ├── reset.less        # 浏览器默认样式重置(Less 版)
│   │   ├── t-design.css      # TDesign 全局 CSS 样式
│   │   └── t-design.less     # TDesign 全局 Less 样式(可自定义主题)
│   │   └── style.css         # 额外全局 CSS(若需单独拆分)
│   ├── utils/                # 工具函数(接口请求、数据处理等)
│   │   └── request.ts        # 接口请求封装
│   ├── App.vue               # 根组件(全局布局、路由出口)
│   ├── main.ts               # 项目入口(初始化 Vue、加载全局配置)
├── .cnb.yml                  # 可能与特定部署/构建流程相关(需结合工具文档)
├── auto-imports.d.ts         # 自动导入 API 类型声明(由 unplugin-auto-import 生成)
├── components.d.ts           # 组件自动注册类型声明(由 unplugin-vue-components 生成)
├── env.d.ts                  # 环境变量类型声明(补充 TypeScript 类型)
├── .env.development          # 开发环境变量
├── .env.production           # 生产环境变量
├── .env.test                 # 测试环境变量
├── .eslintignore             # ESLint 检查忽略文件
├── eslint.config.js          # ESLint 配置,定义校验规则、插件
├── index.html                # 应用入口 HTML,Vue 挂载 DOM 节点
├── .gitignore                # Git 版本控制忽略规则
├── package.json              # 项目依赖、脚本配置
├── package-lock.json         # 依赖版本锁定(确保环境一致)
├── README.md                 # 项目说明文档(你正在编写的内容)
├── tsconfig.json             # TypeScript 基础配置
├── tsconfig.app.json         # TypeScript 业务代码配置
├── tsconfig.node.json        # TypeScript Node 脚本配置
└── vite.config.ts            # Vite 项目构建配置

2.主要依赖

  • node 22.17.1
  • axios 1.11.0
  • vue-router 4.5.1
  • less 4.4.0
  • vue 3.5.17
  • vite 7.0.4
  • tdesign-mobile-vue 1.9.3

3. 如何运行

安装依赖:

$ npm install

启动开发:

$ npm run dev

4. 部署

配置API

.env.development .env.production

VITE_API_URL =

构建发布

运行以下命令构建:

$ npm install
$ npm run build

About

TDesign Mobile Vue 页面模板 - 社区内容类

Language
CSS33.4%
TypeScript19.3%
LESS15.8%
Vue13.3%
Others18.2%