uni-app开发环境搭建&创建uni-app项目

最新推荐文章于 2025-11-04 15:19:24 发布
原创 最新推荐文章于 2025-11-04 15:19:24 发布 · 7.3k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #HBuilder-X #开发环境搭建 #mac

uni-app修炼之路（一）

导语

uni-app使用了快半个月了，现在准备来系统的学习一下uni-app，并做一些笔记！

	学习的最好方式就是查看官方文档，当然初学者可能会对官方文档比较迷茫，我今后做的笔记也许能够为你解决这些疑惑。

uni-app开发环境搭建

1.进入官网下载HBuilder-X

百度搜索uni-app，进入官网，点击快速上手，点击下载
这是uni-app官网首页，我们点击快速上手，里面有Hbuild-x的下载地址
点击HBuilderX：官方IDE下载地址在这里插入图片描述
点击DOWNLOAD
在这里插入图片描述
我们下载开发版 选择你系统对应的版本下载，下载之后直接解压安装就好了
在这里插入图片描述

2.打开HBuilder-X，进行开发环境配置

打开之后的界面是这样子的
在这里插入图片描述
点击工具——》插件安装
在这里插入图片描述
这里就可以安装想要的插件了
在这里插入图片描述
点击工具–》主题 就可以更改主题颜色了
在这里插入图片描述

以Mac为例，点击偏好设置，可以进行如下设置
在这里插入图片描述

创建uni-app项目

快速上手

这里我就不重复了，官网有教程，会比我讲的详细，请查看官网教程快速上手

uni-app项目搭建
weixin_43840232的博客
05-24 343
uni-app项目搭建 环境准备 node_js Git TortoiseGit 微信开发者工具 HBuildX 开源项目准备:前端铺子 导入项目 文件 → 导入 → Git导入 添加好项目后稍等片刻即好。 运行 第一次运行可能会报错 根据提示去市场安装插件 直接点击导入 运行过程中可能会报错，要保持微信开发者IDE打开在这个状态： 然后在微信小程序中设置安全→服务端口打开 发布 以发布小程序为例： 填写自己的appid 即可在小程序页面看见该项目并发布 未完待续。。。 ...
1.uniapp环境搭建
weixin_47649142的博客
06-20 788
uniapp开发小程序 1.安装hubilder和微信开发者工具。HBuilderX：官方IDE下载地址 https://www.dcloud.io/hbuilderx.html，微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2. 创建uni-app 在点击工具栏里的文件 -> 新建 -> 项目： 3.选择uni-app类型，输入工程名，选择项目存储路径，选择.
uni-app项目快速创建指南：从环境配置到常见问题解决方案
最新发布
阿登林的博客
11-04 877
摘要：本文介绍uni-app跨平台开发框架的快速创建方法，包括两种主要创建途径：HBuilderX可视化工具（适合新手）和Vue CLI命令行（适合熟悉Vue的开发者）。详细说明了开发环境准备（Node.js、HBuilderX等）、项目结构解析以及运行调试步骤，重点分析了创建过程中可能遇到的6类常见问题（环境配置、HBuilderX、命令行、运行调试、项目配置等）及其解决方案。文章还提出了项目初始化建议和跨平台开发注意事项，强调遵循uni-app规范、使用条件编译和定期多平台测试的重要性。通过系统化的指导
uniapp开发环境及项目创建
dafsq的博客
06-03 567
uniapp开发环境及项目创建
uni-app环境搭建
weixin_54362381的博客
12-13 993
uni-app环境搭建
uniapp项目创建
qq_45796592的博客
02-18 1294
uniapp配置
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接进销存
12-09
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP系统 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、...
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
uni-app电商实战源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP、SAP系统
11-11
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台，不管领导...
uni-app开发商城类小程序
01-22
在描述中提到的“仿小米商城”项目，意味着我们将探讨如何使用uni-app来创建一个类似电商应用的解决方案。 1. **uni-app入门** - 安装与配置：首先需要安装HBuilderX IDE，它是uni-app的官方开发工具，提供了代码...
uni-app开发微信小程序 一、配置开发环境
01-06
uni-app开发微信小程序 1. 配置开发环境 uni-app基于Hbuilder、微信开发者工具开发 下载链接： https://www.dcloud.io/ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 全部安装好后，首先配置Hbuilder 文件-新建-项目 选择uni-app后填写项目名称，选择文件目录，我这里直接选的默认模版自己开发。 填入appid，需要提前在申请好，最好记录在个人电脑内，以免忘记。 安装需要的插件 例如编译less、sass、语法校验等，选择工具-插件安装
uniapp 开发基础环境搭建和配置
Gblfy_Blog
01-03 2068
文章目录一、下载并安装开发工具1. 官网下载2. 点击 `DOWNLOAD`3. 版本选择二、安装 `sass` 依赖2.1. 打开 `HBuilder X`2.2. 打开插件地址2.3. 导入插件2.4. 在弹出框中点击2.5. 点击【是】2.6. 下载状态2.7. 等待完成即可三、创建 uni-app 项目3.1. 创建项目3.2. 项目目录介绍 一、下载并安装开发工具 1. 官网下载 HBuilder X下载 2. 点击 DOWNLOAD 3. 版本选择 选择 App 开发版本 windows 版
uni-app开发环境配置的过程
m0_53690581的博客
03-07 1471
1，安装HbuildX - 官网下载：https://www.dcloud.io/hbuilderx.html 选择APP开发版 - 解压后使用并安装插件 - 安装插件：工具=>插件安装（uni-app(vue2)编译、uni-app(vue3)编译、scss/sass编译） 2，创建第一个uni-app - 启动HbuildX，文件=>新建=>项目=>选择uni-app=>填写项目名，项目路径=>选择项目模板：uni-ui项目=>点击创建..
uniApp：环境搭建及配置
孤安先生的博客，作者主站正在重构中，敬请期待！
07-02 7313
项目结构说明pages 目录所有的页面的存放目录static 目录静态资源目录unpackage 目录打包文件，存放各个平台的打包文件App.vue项目根组件，页面的入口文件main.js项目入口文件，主要作用是初始化 vue 实例并使用需要的插件配置打包的文件，指定应用的名称、图标、权限等pages.json设置项目页面的存放路径和窗口外观uni.scssuni-app 内置常用的变量页面文件遵循Vue 单文件组件（SFC）规范。组件标签靠近小程序规范，详见。
uni-app 环境搭建
笑望灬星辰
11-04 773
uni-app官网 ide下载 戳这里下载HBulider 下载对应版本的 ide 建议下载 App 开发版 解压 打开HBuilder.exe 就可以开干了
uni-app 项目搭建
qq_37757270的博客
02-07 357
记录第一次使用uni-app遇到的问题
uni-app开发环境
一个孤独漫步者的遐想的博客
02-05 487
uni-app开发环境搭建开发环境安装并运行HbuiderX创建uni-app项目使用vue-cli的方式运行项目 搭建开发环境 安装并运行HbuiderX https://www.dcloud.io/hbuilderx.html 创建uni-app项目 使用vue-cli的方式运行项目 C:\Users\52Hz>node -v
uniapp创建/运行/发布项目
热门推荐
weixin_45618535的博客
12-25 1万+
运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值