uniapp+vite

核心应用代码

src 源代码目录。

这是项目的核心,包含了所有的页面、组件、静态资源、API 请求、状态管理等业务逻辑代码。通常 src 目录内还会有 pages、components、static、store、utils 等子目录。

核心业务代码目录
components 全局/可复用组件目录。

存放可以在多个页面中重复使用的 UI 组件,例如自定义的按钮 (MyButton.vue)、列表项 (ListItem.vue) 等。配合 unplugin-vue-components 插件,这个目录下的组件通常无需手动 import 就可以在页面中直接使用,插件会自动处理。

composables 组合式函数目录。

这是 Vue 3 Composition API 的一个最佳实践。用于存放可复用的、有状态的逻辑。例如,你可以创建一个 useUser.ts 来封装获取和管理用户信息的逻辑,或一个 useRequest.ts 来封装网络请求的逻辑。这些函数可以在多个组件和页面中被调用。

layouts 布局组件目录。

用于定义页面的通用布局结构。例如,你可以创建一个 default.vue 布局,包含统一的页头和页脚;再创建一个 clean.vue 布局,用于登录页这种不需要页头页脚的页面。页面可以在 pages.json 中指定使用哪个布局。

pages 页面目录。

这是应用的核心部分,存放所有的页面文件。每个 .vue 文件都代表应用中的一个页面。目录结构通常会直接映射到小程序的路由路径。例如 pages/user/index.vue 会对应 /pages/user/index 这个路由。

static 静态资源目录。

用于存放不会被 Vite 处理的静态文件,例如字体文件、JSON 数据文件、必须保持原始路径的图片等。编译时,这个目录下的文件会原封不动地被复制到最终的打包目录中。

应用入口与主文件
App.vue 应用根组件。

这是 Uni-app 应用的入口文件,但它不是一个页面。它用于:- 定义应用的全局样式(使用 或在 uni.scss 中定义)。- 监听应用的生命周期函数,如 onLaunch (应用启动)、onShow (应用展示到前台)、onHide (应用进入后台)等。- 可以在这里引入全局的 Provider(如状态管理)。

main.ts 应用主入口脚本。

这是整个应用 JS 的起点。它的主要职责是:- 创建 Vue 应用实例 (createApp)。- 挂载应用到页面上。- 安装和注册 Vue 插件,例如 Pinia (状态管理)、uni-ui (UI 库)等。

自动生成的 TypeScript 类型声明文件
auto-imports.d.ts 由 unplugin-auto-import 插件生成。

它会自动从 Vue、Uni-app 等库中导入常用的 API(如 ref, computed, onLoad, onShow 等),并在此文件中生成类型定义。这样你就不需要在每个文件中手动 import 这些 API,并且你的编辑器依然能提供准确的类型提示和自动补全。

components.d.ts 由 unplugin-vue-components 插件生成。

它会扫描 components 目录,并为所有全局组件生成类型定义。这使得你可以直接在模板中使用 而无需注册和导入,同时 TypeScript 也能识别这个组件及其 props 类型。

uni-pages.d.ts 由 vite-plugin-uni-pages 插件生成。

这个文件非常强大,它会读取 pages 目录结构和 pages.json 的配置,然后生成类型安全的路由信息。这可以防止你在跳转链接时写错路径,并为路由跳转方法提供路径自动补全。

env.d.ts 环境变量类型声明文件。

用于为通过 Vite 注入的环境变量(例如 .env 文件中定义的 VITE_API_URL)提供 TypeScript 类型定义,这样你就可以在代码中安全地使用 import.meta.env.VITE_API_URL 并获得类型提示。

shims.d.ts 垫片声明文件。

主要用于告诉 TypeScript 如何处理非 TS 文件。最常见的是 declare module ‘*.vue’,它告诉 TypeScript .vue 文件是一个合法的模块,可以被 import,避免了类型错误。

Uni-app 特有配置文件和样式
manifest.json 应用清单文件 (JSON 格式)。

与项目根目录的 manifest.config.ts 作用相同。在你的项目中,manifest.config.ts 可能是配置的源文件,而这个 .json 文件可能是由 .ts 文件编译生成的,最终供 Uni-app 编译器使用。你应该编辑 .ts 文件,而不是这个 .json 文件。

pages.json 页面路由与全局样式配置文件 (JSON 格式)。

与根目录的 pages.config.ts 作用相同。同样,它很可能是由 .ts 文件编译生成的,用于配置页面路径、导航栏、tabBar 等。你应该编辑 .ts 文件。

theme.json 全局主题配置文件。

用于配置 uni-ui 组件库的样式变量,或者一些全局的颜色、字体大小等主题相关的样式。

uni.scss 全局 SCSS 样式文件

这个文件通常用来定义全局的 CSS 变量、Sass mixins、通用样式类以及覆盖 uni-ui 的默认样式。它通常会在 main.ts 中被引入,从而作用于整个应用。

Uni-app 框架核心配置

manifest.config.ts 应用清单文件。

这是 Uni-app 的核心配置文件之一,用于配置应用的全局信息,如:- 应用名称、图标、版本号。- App 的启动页(Splash Screen)、权限配置。- 各个小程序平台的 AppID。- H5 平台的路由模式、title 等。

pages.config.ts 页面路由与全局样式配置文件。

它定义了:- 页面路径:应用中所有页面的路径注册。- 路由:应用的启动页是哪个页面。- 全局样式:配置全局的导航栏样式、背景色、窗口表现等。- Tab Bar:如果应用有底部或顶部标签栏,也在这里配置。

uni.config.ts Uni-app 项目的工程配置文件。

主要用于配置编译和打包相关的选项,例如:- 配置 Vite 插件。- 设置输入输出目录。- 针对不同平台的特定编译配置。

构建与工具链配置

vite.config.ts Vite 配置文件。

Vite 是项目的构建工具,这个文件用来配置 Vite 的行为,例如:- 配置开发服务器(端口、代理等)。- 配置 Vite 插件(如 Uni-app 插件)。- 设置路径别名(@ 指向 src 目录)。- 配置打包优化选项。

tsconfig.json TypeScript 配置文件。

它告诉 TypeScript 编译器如何检查和编译你的 .ts 代码。主要定义了:- 编译目标(如 ESNext)。- 模块系统(如 ESNext)。- 严格性检查选项。- 路径别名等。

eslint.config.js ESLint 配置文件。

ESLint 是一个代码检查工具,用于保证代码风格统一和发现潜在错误。这个文件定义了:- 使用哪些代码规则集(如 standard, airbnb)。- 针对 TypeScript、Vue 的特定解析器和插件。- 自定义的代码规则。

uno.config.ts UnoCSS 配置文件。

UnoCSS 是一个即时生成的原子化 CSS 引擎,比 Tailwind CSS 更快更灵活。此文件用于:- 配置预设(Presets),比如默认的原子化规则。- 自定义 CSS 规则、快捷方式(shortcuts)和主题颜色。

index.html H5 平台的 HTML 入口文件。

当你的项目编译成 H5(网页)时,这是主页面。Vite 会自动将编译后的 JS 和 CSS 文件注入到这个文件中。

项目管理与依赖

node_modules 依赖包目录。

所有通过包管理器(如 pnpm)安装的第三方库(如 Vue, Uni-app 插件等)都存放在这里。这个目录体积巨大,不应该被提交到 Git 仓库。

package.json 项目清单文件。

Node.js 项目的“身份证”,记录了:- name, version: 项目名称和版本。- scripts: 定义可执行的命令,如 dev, build 等。- dependencies: 生产环境需要的依赖。- devDependencies: 开发环境需要的依赖(如 Vite, TypeScript, ESLint)。

pnpm-lock.yaml PNPM 的锁文件。

它精确地记录了 package.json 中所有依赖及其子依赖的确切版本和下载地址。这保证了团队中每个成员以及服务器上安装的依赖版本完全一致,避免了“在我电脑上能跑”的问题。

package-lock.json npm 的锁文件。

你的项目中同时存在 pnpm-lock.yaml 和 package-lock.json,这通常意味着团队中有人可能使用了 npm 而不是 pnpm。为了保持一致性,团队应统一使用 pnpm,这个文件可以安全地删除。

.npmrc NPM/PNPM 配置文件。

可以用来配置包管理器的行为,最常见的用途是指定一个私有的或第三方的 npm 镜像源(如淘宝镜像),以加快依赖安装速度。

dist 打包输出目录。

当你执行 build 命令后,编译好的、可用于部署的代码会存放在这里。例如,dist/dev/h5 存放 H5 平台的开发代码,dist/build/mp-weixin 存放微信小程序的生产代码。这个目录也不应该被提交到 Git。

开发环境与编辑器配置

.vscode Visual Studio Code 编辑器配置目录。

可以存放推荐的插件列表(extensions.json)、工作区特定的设置(settings.json),以确保团队成员使用一致的开发环境和代码格式化规则。

.editorconfig 编辑器配置文件。

用于在不同的编辑器和 IDE 之间保持一致的编码风格(如缩进大小、换行符等)。大多数现代编辑器都支持它。

.gitignore Git 忽略文件配置。

列出了哪些文件或目录不应该被 Git 版本控制系统追踪。常见的有 node_modules, dist, .vscode(有时),以及一些操作系统自动生成的文件。

.node-version Node.js 版本定义文件。

指定了项目推荐或强制使用的 Node.js 版本。一些版本管理工具(如 nvm)会自动读取这个文件来切换到正确的 Node.js 版本。

文档与元数据

.github GitHub 仓库配置文件目录。

用于配置 GitHub 相关的功能,如:- Workflows: 定义 GitHub Actions(CI/CD 自动化流程)。- Issue Templates: issue 的模板。- Pull Request Templates: PR 的模板。

README.md 项目说明文件。

通常是别人了解这个项目的第一个入口。它应该包含项目介绍、如何安装依赖、如何运行项目、项目结构说明等信息。

LICENSE 许可证文件。

说明了其他人可以如何使用你的代码(如 MIT, Apache 2.0 等)。

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐