HBuilderX 创建 uni-app 项目

HBuilderX 创建 uni-app 项目​

创建步骤​

1.下载安装 HbuilderX 编辑器

2.通过 HbuilderX 创建 uni-app vue3 项目

3.安装 uni-app vue3 编译器插件

4.编译成微信小程序端代码

5.开启服务端口

小技巧分享：模拟器窗口分离和置顶

HBuildeX 和 微信开发者工具 关系

温馨提示

HBuildeX 和 uni-app 都属于 DCloud 公司的产品。

目录结构​

├─pages            业务页面文件存放的目录
│  └─index
│     └─index.vue  index页面
├─static           存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)
├─unpackage        非工程代码，一般存放运行或发行的编译结果
├─index.html       H5端页面
├─main.js          Vue初始化入口文件
├─App.vue          配置App全局样式、监听应用生命周期
├─pages.json       **配置页面路由、导航栏、tabBar等页面类信息**
├─manifest.json    **配置appid**、应用名称、logo、版本等打包信息
└─uni.scss         uni-app内置的常用样式变量

命令行创建 uni-app 项目​

优势

通过命令行创建 uni-app 项目，不必依赖 HBuilderX，TypeScript 类型支持友好。

命令行创建 uni-app 项目：

vue3 + ts 版

👉国内 gitee 下载github 下载

# 通过 git 从 gitee 克隆下载
git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git

创建其他版本可查看：uni-app 官网

常见问题

• 运行 npx 命令下载失败，请尝试换成手机热点重试
• 换手机热点依旧失败，请尝试从国内备用地址下载
• 在 manifest.json 文件添加 小程序 AppID 用于真机预览
• 运行 npx 命令需依赖 NodeJS 环境，NodeJS 下载地址
• 运行 git 命令需依赖 Git 环境，Git 下载地址

编译和运行 uni-app 项目​

1. 安装依赖 pnpm install
2. 编译成微信小程序 pnpm dev:mp-weixin
3. 导入微信开发者工具

温馨提示

编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。