当前位置:首页 > uni-app

uniapp怎么启动

2026-02-05 16:25:00uni-app

启动UniApp项目的步骤

安装开发环境
确保已安装Node.js(建议版本14+)和HBuilderX(官方IDE)。HBuilderX提供了一键运行和调试功能,适合UniApp开发。

创建项目
在HBuilderX中选择“文件” → “新建” → “项目”,选择“UniApp”模板,填写项目名称和路径。支持默认模板或自定义模板。

运行项目
在HBuilderX顶部菜单栏点击“运行”,选择目标平台(如Chrome、微信开发者工具等)。首次运行需配置相应平台的开发工具路径(如微信开发者工具)。

调试与预览
运行后,HBuilderX会自动编译并启动调试环境。修改代码后保存,部分平台支持热重载(如浏览器),移动端需重新编译。

常见平台配置要点

微信小程序
需在微信开发者工具中开启服务端口:设置 → 安全设置 → 服务端口 → 开启。HBuilderX运行时会自动推送代码到微信开发者工具。

Android真机调试
通过USB连接设备,启用开发者模式和USB调试。HBuilderX运行时会检测设备并安装调试基座。

iOS模拟器
需安装Xcode,在HBuilderX中选择“运行到iOS模拟器”。首次运行可能需在Xcode中信任开发者证书。

命令行启动方式(可选)

全局安装UniApp CLI:

npm install -g @vue/cli @dcloudio/uni-cli-shared

创建项目:

vue create -p dcloudio/uni-preset-vue my-project

运行到浏览器:

uniapp怎么启动

npm run dev:%PLATFORM%

替换%PLATFORM%为目标平台(如h5、mp-weixin)。

标签: uniapp
分享给朋友:

相关文章

uniapp商场

uniapp商场

uniapp 商城开发指南 开发环境搭建 安装HBuilderX作为开发工具,确保已安装Node.js和npm。创建uniapp项目时选择模板,推荐使用官方提供的商城模板或插件市场中的商城模板。 页…

甜uniapp

甜uniapp

甜uniapp的定义 甜uniapp并非官方术语,可能是对uniapp开发中“高效、便捷、愉悦”体验的形容,或特定场景下的优化方案。通常指通过技巧、插件或架构设计提升uniapp开发效率和用户体验。…

uniapp布局规范

uniapp布局规范

uniapp布局规范 uniapp的布局规范基于Flexbox模型,支持跨平台开发,需兼顾不同设备的适配性。以下是核心布局要点: Flex布局基础 使用Flexbox实现弹性布局,默认display…

uniapp 区分环境

uniapp 区分环境

uniapp 区分环境的方法 uniapp 提供了多种方式来区分开发环境和生产环境,以便在不同环境下执行不同的逻辑或配置。以下是常见的几种方法: 使用 process.env.NODE_ENV 在代…

uniapp 自动打包

uniapp 自动打包

uniapp 自动打包方法 uniapp 支持通过命令行或 CI/CD 工具实现自动化打包,适用于 H5、小程序、App 等平台。以下是常见的自动打包方式: H5 或小程序打包 使用 npm ru…

uniapp删除线

uniapp删除线

在UniApp中添加删除线的方法 使用CSS样式实现删除线 通过CSS的text-decoration属性可以轻松实现删除线效果。在UniApp的页面或组件中,直接为文本元素添加样式类即可: .t…