HBuilder X如何运行uni-app 项目

最新推荐文章于 2024-05-19 23:07:11 发布
置顶 最新推荐文章于 2024-05-19 23:07:11 发布
阅读量2.7w 收藏 25
点赞数 7
分类专栏： 前端 vue 文章标签： vue uni-app HBuilder X 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caixuanji/article/details/107713613
版权
前端 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
vue
7 篇文章 1 订阅
订阅专栏

HBuilder X如何运行uni-app 项目

首先，先配置你的node按照路径跟npm安装路径

在这里插入图片描述
如果没有装node环境的话先装node环境跟vue-cli脚手架。

配置成功后点击菜单里的运行/运行到浏览器
  • 然后HBulider会进行编译

在这里插入图片描述

编译运行终端结果如下：

打开浏览器输入http://localhost:8080/ 即可运行起来
在这里插入图片描述

如果报错，请检查插件有没有安装成功
  • 我安装的插件如下图所示：

在这里插入图片描述

  • uni-app是必装的插件，因为我们的项目就是用uni-app写的
  • 然后我会装内置浏览器跟内置终端
  • 如果项目用到scss/sass的话，要装scss/sass插件

scss/sass编译下载地址
HBuilder X插件市场
在这里插入图片描述

caixuanji
关注
  • 7
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
hbuilder x 中运行 uni-app
fengshaopu的博客
05-17 6024
首先我们要配置小程序的地址 1.点击上面的运行、运行到小程序摸机器、微信小程序开发者工具 2.运行配置里面有小程序运行配置里面的地址就是小程序的地址 3.还要去微信小程序里面打开安全地址不打开会运行不起来会报错 4.要运行的话还需进入小程序开启安全地址 开启后回去就可以运行了 5.配置好以后，点击运行、运行到小程序摸机器、微信开发者工具 出现下面这些就证明运行成功会自动打开wx小程序 16:30:49.675 项目 '第一天' 开始编译... 16:30:50.878 请注意运行模式下，因日志输出、s
使用HBuilder-X创建uniapp项目并启动演示
爱吃雪糕的小布丁的博客
08-01 5553
使用Hbuilder-X创建uniapp项目，并在浏览器、内置浏览器、微信小程序启动演示
uni-app开发Hbuilder X的基本使用
最新发布
weijun2003的博客
05-19 773
HBuilder X 是一个全能的 HTML5 程序开发工具，其功能非常强大，其特点有：高效的开发体验：HBuilder X 集成了众多功能强大的插件和工具，让开发者的工作更加高效。同时，它还提供了丰富的代码提示和自动补全功能，快速定位代码错误，提高开发效率。多平台支持：HBuilder X 可以同时支持 iOS 和 Android 平台的程序开发，开发者只需要编写一次代码，就可以打包成多个平台的应用程序。
Hbuildx工具启动uniapp项目
weixin_48952990的博客
07-17 2170
Hbuild工具启动uniapp项目
通过可视化界面HBuilderX操作uni-app项目
BradenHan的专栏
07-29 2291
由于使用文档太过详细繁杂，对于初次接触uniapp的同学可能有点不知所措。
使用HBuilderX搭建uni-app
仅此一❤
03-04 9133
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 查看更多 1、工具安装 HBuilderX：官方IDE下载地址 2、创建uni-app 创建项目： 创建完后目录结构（common目录是手动创建的） 3、使用vuex vuex是HBuilderX已经内置好了，可以直接使用 代码如下 index.js ...
HBuilderX安装以及运行uniapp项目
ytttttt12212的博客
04-11 4740
uni-app学习----HBuilderX的安装及测试运行项目
uni-app网易云音乐实战
10-22
uni-app项目可以通过两种方式创建：一种是使用HBuilderX创建项目，另一种是使用命令行工具创建项目。在本文中，我们使用HBuilderX创建项目。在创建项目后，需要在pages.json文件中配置编写静态页面。 配置tabBar ...
uni-app-template:uni-app的项目模板
05-11
app快速开发模板，参考学习一同进步建议uni-app使用时间达到1年以上的程序员来学习使用步骤下载下来，解压成文件夹把项目包丢到HBuilder X里面HBuilder X要安装scss/sass编译插件运行项目觉得不错，给个5星好评吧QQ...
uni-app的使用体验总结
02-24
没用之前以为真和Vue一样，用了之后才知道。有点类似Vue和小程序结合的感觉。...配置项跟着文档来，开发环境也是现成的，下载HBuilderX导入项目就能运行，日常开发习惯了VSCode，所以HBuilderX的主要作
uni-app使用微信小程序云函数的步骤示例
10-15
从现在起，云函数的编写可以在Hbuilder X中完成，而部署仍需在微信开发者工具进行。 最后，我们编写具体的云函数逻辑。例如，我们可以编写一个检查文本内容安全性的云函数。在`index.js`中，初始化`wx-server-sdk`...
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台
09-28
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，管理后台是skyshop电商程序，用PHP+mysql开发的，简单部署了一下，可以使用。
VSCode 配置uni-app的方法
11-20
CＬＩ工程全局安装vue-cli npm install -g @vue/cli 通过cli创建uni-app项目  vue create -p ...从 git 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。 使用scss
创建、运行uni-app（通过HBuilderX）
博客
04-14 518
uni-app官网•介绍•快速上手。
HBuilder 微信小程序中运行uni-app项目
q1ngqingsky的博客
07-25 2753
在HBuilder中打开设置，在运行配置中填写你本地的微信开发者工具所在路径。
教你在HbuilderX上使用模拟器运行uni-app,良心教学！！！
f1661434531的博客
07-05 5066
事先声明：本人电脑为windows操作系统，只能使用Android模拟器，因此只对Android模拟器(以逍遥模拟器为例)进行介绍一、下载安装HbuilderX和逍遥模拟器（准备工作）二、添加adb.exe到环境变量三、在HbuilderX中连接模拟器一、下载安装HbuilderX和逍遥模拟器（准备工作）1.下载安装HbuilderXHbuilderX官网链接：https://www.dcloud.io/hbuilderx.html 点击Download for Windows下载安装即可2.下载安装
HbuilderX运行uni-app开发的微信小程序
jieyucx的博客
12-08 3192
HbuilderX运行uni-app开发的微信小程序
hbuilderx创建、运行uni-app
zengliguang的专栏
02-24 2927
在百度开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验uni-app。在抖音开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 抖音开发者工具，即可在抖音开发者工具里面体验uni-app。真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
【蛋糕商城】（一）使用HBuliderX搭建uni-app项目
io_123io_123的博客
04-16 6201
【蛋糕商城】（一）项目搭建：如何搭建一个uni-app项目
hbuilderx创建uni-app项目结构
08-16
在 HBuilderX 中创建 uni-app 项目的结构可以按照以下步骤进行操作： 1. 打开 HBuilderX，点击左上角的 "文件"，选择 "新建"，然后选择 "uni-app 项目"。 2. 在弹出的对话框中，输入项目名称并选择保存的路径。你也可以选择是否使用 HBuilderX 提供的模板示例。 3. 在项目创建完成后，HBuilderX 会自动为你生成 uni-app 的基本文件结构。项目结构包括以下文件和文件夹： - `manifest.json`：uni-app 的配置文件，用于配置应用的基本信息和页面路由等。 - `pages` 文件夹：用于存放应用的页面文件，每个页面都应该包含一个 `.vue` 文件。 - `static` 文件夹：用于存放静态资源文件，如图片、样式等。 - `App.vue`：应用的根组件，整个应用的页面都会被渲染到该组件中。 - `main.js`：应用的入口文件，用于初始化 Vue 实例和配置全局插件等。 4. 接下来，你可以根据需要修改和添加页面、组件以及其他资源文件来构建你的 uni-app 项目。 注意：在创建项目时，请确保已经安装了 HBuilderX 所需的开发环境，并且已经正确配置了相关的运行平台。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值