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-project

2、创建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,或者通过顶部菜单"发行",然后选择云打包,在打开的页面中配置证书信息。

  1. 安卓证书信息配置:

如果有自有证书,选择自有证书,填写相关信息

如果没有证书,选择使用公共测试证书

  1. 苹果证书信息配置:

设置bundle ID,填写证书相关信息

  1. 配置证书信息后,选择"打自定义调试基座","传统打包",然后点击右下角打包按钮,即可提交云打包。

  2. 云打包成功后,重新运行项目,即可选择通过自定义基座运行。

2.2 cli项目

cli创建的项目,通过下面指令运行和打包发布:

复制代码
npm run dev:%PLATFORM%
npm run build:%PLATFORM%

注意

cli创建的项目,在App端不支持run,运行调试仍需在HBuilderX中操作。

相关推荐
2501_915106322 小时前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张2 小时前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
十五春会1 天前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i1 天前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三1 天前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生1 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
2501_915918411 天前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview