一、项目创建1. 创建项目本节使用 uni-app 官方提供的 Vue3 Vite 模板快速初始化项目避免手动搭建脚手架。环境准备Node.js 16.0 及以上版本推荐使用最新长期支持版本并提前安装微信开发者工具。在终端执行以下命令创建项目npx degit dcloudio/uni-preset-vue#vite my-vue3-project命令说明npx degit直接下载 GitHub 仓库模板无需全局安装脚手架工具dcloudio/uni-preset-vue#viteuni-app 官方 Vue3 Vite 模板my-vue3-project项目目录名可按需修改。创建完成后进入项目目录cdmy-vue3-project2. 安装依赖进入项目目录后安装模板依赖npminstall如果依赖下载较慢可切换到国内镜像npm install --registryhttps://registry.npmmirror.com3. 项目打包依赖安装完成后启动微信小程序的开发模式编译npmrun dev:mp-weixin该命令会持续监听文件变化并编译到dist/dev/mp-weixin目录后续导入微信开发者工具进行调试。二、项目运行1. 导入项目编译完成后打开微信开发者工具选择「导入项目」路径选择项目根目录下的dist/dev/mp-weixin目录导入时需要填写项目信息AppID填写自己的小程序 AppID没有 AppID 可先选择「测试号」体验本地功能后端服务本地预览可直接选择「不使用云服务」小程序 AppID 可在微信公众平台注册小程序后获取后端服务仅在需要使用云开发能力时才需选择。2. 小程序效果预览导入成功并开启编译后即可在微信开发者工具中查看小程序运行效果三、项目结构my-uniapp-project/ ├── .husky/ # Git Hooks 工具配置用于在提交代码前自动执行代码检查 ├── public/ # 纯静态公共资源不参与 Vite 构建直接复制到 dist ├── src/ # 核心源码目录所有业务代码均在此开发 │ ├── api/ # 【接口请求层】统一管理所有与后端的 HTTP 通信 │ │ ├── request.ts # 核心封装 uni.request实现请求/响应拦截器、Token注入、统一错误处理 │ │ └── modules/ # 按业务模块拆分 API 定义如 user.ts, order.ts保持代码高内聚 │ │ │ ├── assets/ # 【需编译的静态资源】存放会被 Vite 构建处理的资源 │ │ ├── images/ # 需要被压缩、转换或作为模块导入的图片 │ │ └── styles/ # 全局 SCSS/Less 变量、Mixin、基础重置样式等 │ │ │ ├── components/ # 【全局通用组件】存放不含业务逻辑的纯 UI 组件项目 UI 库基石 │ │ ├── base/ # 基础组件如 BaseButton, AppModal, FormInput │ │ └── business/ # 跨模块复用的业务组件如 UserAvatar, StatusTag │ │ │ ├── composables/ # 【组合式函数/Hooks】Vue3 精髓封装和复用带状态的逻辑 │ │ ├── usePagination.ts# 示例封装列表分页逻辑当前页、下一页、数据加载状态等 │ │ └── useAuth.ts # 示例封装用户登录态、Token 获取逻辑 │ │ │ ├── layouts/ # 【全局布局组件】存放应用的骨架结构如自定义导航栏、底部 TabBar │ │ │ ├── pages/ # 【主包页面】存放核心、启动时必须加载的页面如首页、登录页、TabBar页 │ │ ├── index/ # 首页模块 │ │ │ └── index.vue │ │ └── login/ # 登录模块 │ │ └── login.vue │ │ │ ├── packages/ # 【业务分包】大型项目的灵魂按业务领域划分的独立分包 │ │ ├── user-center/ # 用户中心分包高内聚包含自己的 pages, components, apis │ │ └── order/ # 订单模块分包极大降低主包体积和模块间耦合度 │ │ │ ├── static/ # 【免编译静态资源】uni-app 约定目录文件原封不动复制到最终包 │ │ ├── icons/ # 适合存放小程序图标、字体文件等注意不要放未使用的废文件 │ │ └── tabbar/ # TabBar 专用图标 │ │ │ ├── store/ # 【全局状态管理】使用 Pinia按模块化方式组织 │ │ ├── modules/ # 业务状态模块如 user.ts, cart.ts │ │ └── index.ts # 统一注册并导出所有 Store 模块 │ │ │ ├── utils/ # 【通用工具函数】存放无副作用的纯函数工具集 │ │ ├── format.ts # 日期格式化、金额处理等 │ │ └── validate.ts # 表单数据校验规则 │ │ │ ├── App.vue # 应用入口配置 App 全局样式、监听应用级生命周期 │ ├── main.ts # Vue 初始化入口文件挂载 Pinia、全局组件等 │ ├── manifest.json # 应用配置配置 AppID、启动页、权限、微信小程序特有配置等 │ ├── pages.json # 【页面路由配置】见下方详细解析 │ └── uni.scss # 内置的常用样式变量uni-app 官方提供可全局直接使用 │ ├── index.html # H5 平台的入口 HTML 模板文件 ├── package.json # 项目依赖管理与运行脚本配置 ├── tsconfig.json # 【TS 编译器配置】见下方详细解析 ├── vite.config.ts # 【Vite 构建配置】见下方详细解析 ├── commitlint.config.js # Commitizen 提交信息规范配置确保 Git 提交记录标准化 └── README.md # 项目说明文档
一、项目创建1. 创建项目本节使用 uni-app 官方提供的 Vue3 Vite 模板快速初始化项目避免手动搭建脚手架。环境准备Node.js 16.0 及以上版本推荐使用最新长期支持版本并提前安装微信开发者工具。在终端执行以下命令创建项目npx degit dcloudio/uni-preset-vue#vite my-vue3-project命令说明npx degit直接下载 GitHub 仓库模板无需全局安装脚手架工具dcloudio/uni-preset-vue#viteuni-app 官方 Vue3 Vite 模板my-vue3-project项目目录名可按需修改。创建完成后进入项目目录cdmy-vue3-project2. 安装依赖进入项目目录后安装模板依赖npminstall如果依赖下载较慢可切换到国内镜像npm install --registryhttps://registry.npmmirror.com3. 项目打包依赖安装完成后启动微信小程序的开发模式编译npmrun dev:mp-weixin该命令会持续监听文件变化并编译到dist/dev/mp-weixin目录后续导入微信开发者工具进行调试。二、项目运行1. 导入项目编译完成后打开微信开发者工具选择「导入项目」路径选择项目根目录下的dist/dev/mp-weixin目录导入时需要填写项目信息AppID填写自己的小程序 AppID没有 AppID 可先选择「测试号」体验本地功能后端服务本地预览可直接选择「不使用云服务」小程序 AppID 可在微信公众平台注册小程序后获取后端服务仅在需要使用云开发能力时才需选择。2. 小程序效果预览导入成功并开启编译后即可在微信开发者工具中查看小程序运行效果三、项目结构my-uniapp-project/ ├── .husky/ # Git Hooks 工具配置用于在提交代码前自动执行代码检查 ├── public/ # 纯静态公共资源不参与 Vite 构建直接复制到 dist ├── src/ # 核心源码目录所有业务代码均在此开发 │ ├── api/ # 【接口请求层】统一管理所有与后端的 HTTP 通信 │ │ ├── request.ts # 核心封装 uni.request实现请求/响应拦截器、Token注入、统一错误处理 │ │ └── modules/ # 按业务模块拆分 API 定义如 user.ts, order.ts保持代码高内聚 │ │ │ ├── assets/ # 【需编译的静态资源】存放会被 Vite 构建处理的资源 │ │ ├── images/ # 需要被压缩、转换或作为模块导入的图片 │ │ └── styles/ # 全局 SCSS/Less 变量、Mixin、基础重置样式等 │ │ │ ├── components/ # 【全局通用组件】存放不含业务逻辑的纯 UI 组件项目 UI 库基石 │ │ ├── base/ # 基础组件如 BaseButton, AppModal, FormInput │ │ └── business/ # 跨模块复用的业务组件如 UserAvatar, StatusTag │ │ │ ├── composables/ # 【组合式函数/Hooks】Vue3 精髓封装和复用带状态的逻辑 │ │ ├── usePagination.ts# 示例封装列表分页逻辑当前页、下一页、数据加载状态等 │ │ └── useAuth.ts # 示例封装用户登录态、Token 获取逻辑 │ │ │ ├── layouts/ # 【全局布局组件】存放应用的骨架结构如自定义导航栏、底部 TabBar │ │ │ ├── pages/ # 【主包页面】存放核心、启动时必须加载的页面如首页、登录页、TabBar页 │ │ ├── index/ # 首页模块 │ │ │ └── index.vue │ │ └── login/ # 登录模块 │ │ └── login.vue │ │ │ ├── packages/ # 【业务分包】大型项目的灵魂按业务领域划分的独立分包 │ │ ├── user-center/ # 用户中心分包高内聚包含自己的 pages, components, apis │ │ └── order/ # 订单模块分包极大降低主包体积和模块间耦合度 │ │ │ ├── static/ # 【免编译静态资源】uni-app 约定目录文件原封不动复制到最终包 │ │ ├── icons/ # 适合存放小程序图标、字体文件等注意不要放未使用的废文件 │ │ └── tabbar/ # TabBar 专用图标 │ │ │ ├── store/ # 【全局状态管理】使用 Pinia按模块化方式组织 │ │ ├── modules/ # 业务状态模块如 user.ts, cart.ts │ │ └── index.ts # 统一注册并导出所有 Store 模块 │ │ │ ├── utils/ # 【通用工具函数】存放无副作用的纯函数工具集 │ │ ├── format.ts # 日期格式化、金额处理等 │ │ └── validate.ts # 表单数据校验规则 │ │ │ ├── App.vue # 应用入口配置 App 全局样式、监听应用级生命周期 │ ├── main.ts # Vue 初始化入口文件挂载 Pinia、全局组件等 │ ├── manifest.json # 应用配置配置 AppID、启动页、权限、微信小程序特有配置等 │ ├── pages.json # 【页面路由配置】见下方详细解析 │ └── uni.scss # 内置的常用样式变量uni-app 官方提供可全局直接使用 │ ├── index.html # H5 平台的入口 HTML 模板文件 ├── package.json # 项目依赖管理与运行脚本配置 ├── tsconfig.json # 【TS 编译器配置】见下方详细解析 ├── vite.config.ts # 【Vite 构建配置】见下方详细解析 ├── commitlint.config.js # Commitizen 提交信息规范配置确保 Git 提交记录标准化 └── README.md # 项目说明文档
