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 项目
- 安装依赖
pnpm install
- 编译成微信小程序
pnpm dev:mp-weixin
- 导入微信开发者工具
温馨提示
编译成 H5 端可运行 pnpm dev:h5
通过浏览器预览项目。