.
├── .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 项目构建配置
$ npm install
$ npm run dev
.env.development .env.production
VITE_API_URL =
运行以下命令构建:
$ npm install $ npm run build