hbuilderx可视化和cli脚手架创建uniapp项目的区别

HBuilderXvsCLI:视觉化项目创建的优劣势

最新推荐文章于 2025-10-16 08:46:55 发布

转载最新推荐文章于 2025-10-16 08:46:55 发布 · 612 阅读

文章标签：

#node.js

本文比较了CLI创建的传统Node项目结构与HBuilderX的可视化方式。HBuilderX提供了无需Node和npm的低门槛体验，避免了网络依赖问题，特别适合新手和网络不稳定的情况。然而，它并不兼容所有传统CLI项目的开发，如App和uniCloud需要继续使用CLI模式。

cli创建的项目

是传统的node项目结构
工程代码在src项目下
编译器在项目下
编译结果在dist目录下
cli创建的项目可以拖入hbuilderx里面
如果想用其他ide开发uniapp项目只能用cli模式

hbuilderx可视化创建的项目

是一种免node开发概念
工程代码在项目目录下
编译器在hbuilderx目录下
编译结果在项目的unpackage目录下
兼容传统的cli项目
开发app和uniCloud必须使用hbuilderx

hbuilderx可视化优点

提升易用性，门槛较低：很多开发者对node不熟悉
npm、github网络经常出问题：用cli创建项目时，cli需要从npm安装，预置的项目模板选择从github下载，这些经常因为网络问题卡壳。可视化创建项目不存在这个问题。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一颗柚

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HBuilderX（uni-app）新手保姆级教程！看这篇就够了！

xiaolouuuu的博客

12-06

1万+

HBuilderX 是一款集成开发环境（IDE），它支持多种编程语言和框架，包括HTML、CSS、JavaScript、PHP等。而 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括PC和移动端）、以及各种小程序（微信/支付宝/百度等）平台。

用Vue CLI创建uniapp项目

weixin_45416189的博客

03-03

7983

用Vue CLI创建uniapp 用Vue CLI创建uni-app，摆脱HBuilder，npm命令行运行及发布除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。如果是老的项目，也可以通过下方步骤，创建一个 uni-app 选择默认模板，然后将项目原封不动的复制到新项目的 ./src 目录。执行 npm run serve / npm run build 就可以运行和打包了。 1. 环境安装全局安装vue-cli npm ins

参与评论您还未登录，请先登录后发表或查看评论

uni-app 脚手架 cli创建项目和HBuilderX 创建项目的区别

LlanyW的专栏

08-24

3255

而vue文件用的是webview渲染，Webview是一个基于webkit的引擎，可以解析DOM元素，展示html页面的控件，他和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。vue文件用的是webview渲染，Webview是一个基于webkit的引擎，可以解析DOM元素，展示html页面的控件，他和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。因为其他ide没有内置uni-app的编译器，所以其他ide开发uni-app，只能把编译器安装在项目下，也就是cli创建的项目格式。

DIYGW UniApp可视化：开启前端开发新纪元，让创意一键落地！

最新发布

chenchuang0128的博客

10-16

265

DIYGW UniApp可视化工具以其简单易用、功能强大、多平台支持等优势，为前端开发带来了全新的体验。它让开发变得更加高效、便捷，让创意能够更快地落地。如果你正在寻找一款能够提升开发效率、降低开发成本的工具，那么不妨试试DIYGW UniApp可视化工具，相信它会给你带来意想不到的惊喜！“在低代码时代，效率就是竞争力！无论是创业者、产品经理，还是程序员，掌握DIYGW这样的工具，都能让你在竞争中快人一步！你现在不用，你的竞争对手可能已经在用了！💬 互动话题“你觉得低代码工具会取代传统开发吗。

vue-cli 构建uniapp项目对比 HBuilderX，哪个好？

wcdunf的博客

04-22

2055

两种构建 uniapp 项目的方式各有优缺点，您可以根据自己的需求选择适合自己的方法。

uniapp cli开发和HBuilderX开发

qq_41974199的博客

12-20

1456

cli开发和HBuilderX开发的区别，cli开发和HBuilderX开发的区别主要在于开发方式不同，HBuilderX开发是可视化的，而cli开发是命令行的。他们之间可以相互转换，比如你可以用HBuilderX开发，然后用cli打包，也可以用cli开发，然后用HBuilderX打包。

代替vscode的工具_开发uni-app，HBuilderX和其他工具(如vscode)有什么区别

weixin_39723441的博客

12-20

3197

前言uni-app是一个开放的、支持多种开发工具的多端开发框架。目前前端界，主流开发工具有4个，vscode、HBuilderX、webstorm、sublime text。其中前2个市占率更高。(vscode公布的全球月活是500万，没有单独公布中国区数字。HBuilder只服务中国开发者，月活是110万，在中国的市占率应该相近)HBuilderX和uni-app，同属一个公司，即DCloud出...

Mac下通过vue-cli创建的uni-app项目中使用sass

xyf的博客

07-15

2581

一、创建项目 uni-app官网上提供了 HBuilderX可视化界面、vue-cli命令行两种方式创建项目。二、安装sass 通过可视化界面创建的：在HBuilderX - 工具 - 插件安装 -找到scss/sass编译插件栏目，进行安装。通过vue-cli命令行创建的： uni-app官网上已经明确说明了cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。 OK，那我们开.

uniapp项目改造vue命令自动化编译

weixin_43934346的博客

12-03

2886

uniapp项目改造vue命令自动化编译查看官方文档了解结构原理最近接手公司一个基于uniapp框架项目，公司部署项目采用的是Jenkins自动化部署，由于项目之前是在HBuilderX可视化新建的，每次部署都要手动编译打包，实属不符合自动化浪费下班约会时间，那就改造改造。查看官方文档了解结构官方文档介绍是有2种方式创建项目：官方链接通过 HBuilderX 可视化界面通过vue-cli命令行原理既然支持vue-cli命令行创建，那么改造肯定是支持的！也就是给原本项目加多个vue脚手架

uni-app之cli 编译打包

惜阳

08-28

7679

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。目录环境安装创建uni-app运行发布注意将已有的项目改造上传微信小程序代码环境安装全局安装vue-cli npm install -g @vue/cli 创建uni-app 使用正式版（对应HBuilderX最新正式版）vue create -p dcloudio/uni-preset-vue my-pro 使用alpha版（对应HBuilderX最新alpha版）vue .

01uni-app 基础教程环境配置【uniapp 专题 1】

2401_84091110的博客

04-06

1125

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为，如就是下载图片模板。由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

使用uni-app创建小程序项目的两种方式对比

qq_37405634的博客

08-25

2100

方法一，使用HBuilderX创建特点：简单、可视化界面操作，但需要依赖HBuilderX 创建步骤：文件 > 新建 > 项目创建成功后目录结构如下：微信小程序运行方法如下图，会自动打开微信小程序开发者工具；方法二：通过vue-cli脚手架创建特点：通过命令行创建项目、安装插件，支持所有编辑器；创建项目的方法： 1、全局安装vue-cli 3.x npm insta...

uni-app & HBuilderX & 小程序

weixin_47886687的博客

11-29

2989

0.什么是uni-app uni-APP官网:https://uniapp.dcloud.io/README uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 1.uni-app工作原理举例:平时我们写的vue都并非直接传输给浏览器,因为浏览器看不懂,通常会经过编译后翻译成HTML格式,再由浏览器渲染. uni-app的工作原理就是充

Dcloud产品HbuilderX、uniapp你用过吗

hello_list的博客

05-13

2799

uni-app可视化创建项目与cli创建的项目区别

qq_39131699的博客

05-23

1309

可视化 cli vue.config.js 否是 .env.development,.env.production 否是打包app 是否 mp-storage 否是，会导致h5端本地存储失效报错

uni-app HBuilderX项目转为cli项目及踩坑记录

Mr.CJ

12-28

5874

uni-app HBuilderX项目转为cli项目

uniapp使用cli脚手架创建兼容小程序和h5的项目自动化命令打包运行

Gblfy_Blog

04-19

3592

uniapp使用cli脚手架创建兼容小程序和h5的项目自动化命令打包运行

uniapp 可视化开发_uni-APP使用HBuilderX可视化界面创建的项目项目如何通过命令行打包h5...

weixin_39948247的博客

12-21

1550

使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别编译器的区别•cli创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行npm update。•HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。•已经使用cli创建的项目，如果想继续在HBuilde...

使用HBuilderX高效搭建Uni-App微信小程序开发环境

qq_31226163的博客

05-24

6965

Uni-App是一个使用Vue.js开发所有前端应用的框架，支持发布到iOS、Android、H5、以及各种小程序平台（包括微信小程序、支付宝小程序等）。它的核心优势在于一套代码可以编译到多个平台，大大降低了跨平台开发的成本。HBuilderX是DCloud推出的一款专为前端开发者设计的开发工具，内置了对Vue.js、uni-app的完美支持，提供了强大的代码提示、智能感知、模板快速生成等功能，让开发效率飞升。从零开始，申请开通微信小程序全流程_微信公众号申请小程序 csdn-优快云博客。