uni-app总结3-项目新建运行调试
一、新建项目
-
通过HbuilderX新建
在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N，MacOS上是CMD + N）：
左测Tab选择uni-app类型，输入工程名，选择模板，Vue版本选择3，其他不用修改。点击创建，即可成功创建。
uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
-
通过cli新建
推荐使用vue最新的3.0版本，所以cli只介绍3.0对应的指令
1、创建JavaScript项目
npx degit dcloudio/uni-preset-vue#vite my-vue3-project如果对应HBuilderX最新alpha版本，用下面这个指令
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project2、创建TypeScript 项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project注意
- Vue3/Vite版要求 node 版本 18+、20+
- 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
- HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
- HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径
- 如果想使用其他ide（比如VSCode）来开发uni-app，必须使用cli来创建项目
二、项目结构
上图是一个新建项目的目录结构
App.vue是主入口
pages-页面文件
static-静态资源文件
二、项目运行
2.1 HbuilderX项目
HBuilder中可以直接通过快捷键CMD+R /CTRL+R或者点击运行按钮或者选择顶部“运行”菜单，然后选择运行的平台，即可运行。
如果是运行到浏览器环境，直接选择对应的浏览器即可。
如果是运行到微信小程序，需要按照提示安装微信开发工具并开启部分权限设置。
如果是运行到App环境，需要先打开模拟器或者通过usb将手机连接到电脑。然后选择通过标准基座运行。如果项目用到一些云插件，需要通过自定义基座才能调试，自定义基座需要自己云打包制作才可使用。
自定义基座制作
制作自定义基座需要安卓、iOS开发者证书，需要另外去制作，这里不赘述了。
使用快捷键CMD+U / CTRL+U，或者通过顶部菜单“发行”，然后选择云打包，在打开的页面中配置证书信息。
- 安卓证书信息配置：
如果有自有证书，选择自有证书，填写相关信息
如果没有证书，选择使用公共测试证书
2. 苹果证书信息配置：
设置bundle ID，填写证书相关信息
3. 配置证书信息后，选择“打自定义调试基座”，“传统打包”，然后点击右下角打包按钮，即可提交云打包。
4. 云打包成功后，重新运行项目，即可选择通过自定义基座运行。
2.2 cli项目
cli创建的项目，通过下面指令运行和打包发布：
npm run dev:%PLATFORM%
npm run build:%PLATFORM%注意
cli创建的项目，在App端不支持run，运行调试仍需在HBuilderX中操作。