【uni-app】从零到一的项目搭建及环境配置

文章目录

• 简介
• 环境配置
• • Node环境配置
  • [安装 HBuilderX](#安装 HBuilderX)
• 开始
• • 创建项目
  • 项目结构
  • 开发指南
  • 插件管理
  • 运行项目
  • 调试
  • 测试
  • 发布

简介

uni-app 是一个使用 Vue.js 开发跨平台应用的框架，允许开发者编写一次代码，发布到 iOS、Android、Web（包括 PC 和移动端浏览器）以及各种小程序平台。

环境配置

Node环境配置

1. 安装 Node.js : 访问 Node.js 官网 下载并安装最新版本的 Node.js。

安装教程 Node安装及环境配置+Node多版本管理【Window/macOS】

---

安装 HBuilderX

访问 HBuilderX 官网 下载并安装 HBuilderX IDE。

下载安装包，并解压 .zip 文件，进入目录，等到下面文件列表

双击打开HBuilderX.exe

开始

创建项目

1. 打开 HBuilderX。
2. 选择"新建项目"，选择 uni-app 项目模板。
3. 填写项目名称和路径，点击"创建"。

项目结构

my-uni-app/
├── components/       # 存放自定义组件
├── pages/            # 存放页面文件
├── static/           # 存放静态资源文件
├── store/            # 存放 Vuex 状态管理文件
├── unpackage/        # 存放编译后的文件
├── main.js           # 入口文件
├── App.vue           # 应用主组件
└── manifest.json     # 配置文件

开发指南

1. 编写页面 : 在 pages/ 目录下创建页面文件。
2. 使用组件 : 在 components/ 目录下创建自定义组件。
3. 状态管理: 如果需要，使用 Vuex 进行状态管理。
4. 配置路由 : 在 pages.json 中配置页面路由。
5. 编写样式: 使用 CSS 或 SCSS 编写样式。

插件管理

运行项目

1. 在 HBuilderX 中选择要运行的平台（如 Web、iOS 模拟器等）。
2. 点击运行按钮，项目将在所选平台上启动。

调试

1. 使用 HBuilderX 的调试工具进行代码调试。
2. 使用浏览器的开发者工具进行 Web 页面调试。

测试

1. 单元测试: 使用 Vue Test Utils 进行组件的单元测试。
2. 端到端测试: 使用 Appium 或类似工具进行端到端测试。

发布

1. 编译项目: 在 HBuilderX 中选择发布平台，进行编译。
2. 打包应用: 根据目标平台的要求进行打包。
3. 上传到应用商店: 将打包好的应用上传到 App Store 或 Google Play。

---

请注意，这个文档是一个基础模板，具体内容会根据 uni-app 的实际版本和功能有所变动。开发过程中应参考 uni-app 的官方文档获取最新和最准确的信息。