首页 > 其他分享 >一款前端开发工具Hbuilder

一款前端开发工具Hbuilder

时间:2024-03-15 16:58:39浏览次数:27  
标签:插件 cn dcloud 前端 Hbuilder 开发工具 HX net HBuilderX

背景:最近日在接触前同事留下的一个VUE项目(只有前端代码,后台服务压根没写真不知道以前是怎么糊弄过去的)时,发现一款可以快速开发前端的软件;今日分享一下。

当我打开项目时发现,有个app.vue文件,

 首先想到的应该是个VUE项目;根据以前的开发经验,我果断的安装了node.js,vs code等软件,结果运行时一直报错,显示如下:

根据理解就是缺少package.json文件;经过咨询前同事发知道前端开发的IDE软件不是vs code,可能是Hbuilder。因此,我去HBuilderX官网果断现在了HBuilderX.3.99.2023122611版本,解压文件

找到启动文件,选择 文件-->打开目录-->选择项目文件

我然后就选择了运行-->运行到内置浏览器;这个IDE只所以强大就是因为他可以免安装,解压就能使用,并且在运行时会自动检查项目需要的插件,并提醒用户进行安装。

接下来看看官网上的介绍:

HBuilderX,H是HTML的首字母,Builder是构造者,X是HBuilder的下一代版本。我们也简称HX。 HX轻如编辑器、强如IDE的合体版本。

让我们简单了解下HX的特点
  1. 轻巧 仅10余M的绿色发行包(不含插件)
  2. 极速 不管是启动速度、大文档打开速度、编码提示,都极速响应 C++的架构性能远超Java或Electron架构
  3. vue开发强化 HX对vue做了大量优化投入,开发体验远超其他开发工具 ,链接vue - HBuilderX 文档 (dcloud.net.cn)
  4. 小程序支持 国外开发工具没有对中国的小程序开发优化,HX可新建uni-app 小程序等项目,为国人提供更高效工具
  5. markdown利器 HX是唯一一个新建文件默认类型是markdown的编辑器,也是对md支持最强的编辑器 HX为md强化了众多功能,请务必点击【菜单-帮助-markdown语法示例】,快速掌握md及HX的强化技巧!
  6. 清爽护眼 HX的界面比其他工具更清爽简洁,绿柔主题经过科学的脑疲劳测试,是最适合人眼长期观看的主题界面 ​​​​​​​,链接HBuilderX如何保护程序员的身心健康 - HBuilderX 文档 (dcloud.net.cn)
  7. 强大的语法提示 HX是中国唯一一家拥有自主IDE语法分析引擎的公司,对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键),链接跳转/转到定义 - HBuilderX 文档 (dcloud.net.cn)
  8. 高效极客工具 更强大的多光标、智能双击...让字处理的效率大幅提升,链接高效极客技巧 - HBuilderX 文档 (dcloud.net.cn)
  9. 更强的json支持 现代js开发中大量json结构的写法,HX提供了比其他工具更高效的操作 ​​​​​​​,链接 JSON - HBuilderX 文档 (dcloud.net.cn)
扩展性

HX支持java插件、nodejs插件,并兼容了很多vscode的插件及代码块。
还可以通过外部命令,方便的调用各种命令行功能,并设置快捷键。链接:外部命令 - HBuilderX 文档 (dcloud.net.cn)
如果你习惯了其他工具(如vscode或sublime)的​​​​​​​快捷键,在菜单工具-快捷键方案中可以切换。链接:快捷键 - HBuilderX 文档 (dcloud.net.cn)

插件市场

HBuilderX插件市场拥有丰富的插件,对于提升工作效率有极大帮助。

插件市场地址: https://ext.dcloud.net.cn/

软件下载地址:​​​​​​​HBuilderX-高效极客技巧 (dcloud.io)

 

标签:插件,cn,dcloud,前端,Hbuilder,开发工具,HX,net,HBuilderX
From: https://blog.csdn.net/A_nanda/article/details/136646588

相关文章

  • RuoYi 前端Docker部署
    Dockerfile#基础镜像不指定版本则默认最新FROMnginx#挂载目录VOLUME/home/nginx/www/ruoyi#创建目录RUNmkdir-p/home/nginx/www/ruoyi#指定路径该路径我是自己提前创建好的WORKDIR/home/nginx/www/ruoyi#复制conf文件到路径./conf/nginx.conf和上面的mys......
  • 2024前端 JS面试题
    目录1,JS数据类型2,JS两种数据类型1,基本数据类型1,基本数据类型的值不可变2,基本数据类型不可以添加属性和方法:3,基本数据类型的赋值是简单的赋值4,基本数据类型的比较是值的比较:5,基本数据类型的值存放在栈内存中6,基本数据类型详解1,undefined2,Null3,string4,Number5,Bo......
  • Day04---Web前端基础
    定时器的实际应用开发者,我们基于定时器结合js操作css样式或者html代码,就可以实现各种的酷炫的动态交互效果了。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{width:150px......
  • 前端构建工具 Vite
    Vite(法语意为“快速的”,发音/vit/,发音同“veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:一个开发服务器,它基于原生ESModule提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。一套构建指令,它使用Rollup打包你的代码,并且它是预配......
  • 【前端面试题】:CSS篇
    1.详细说明CSS3新特性?选择器:CSS3提供了更多类型的选择器,包括属性选择器、伪类选择器、伪元素选择器和多重选择器等,使得开发者能够更精准地定位和操作页面元素。盒模型:CSS3中的盒模型得到了扩展,引入了新的box-sizing属性,使得开发者能够更灵活地控制元素的尺寸和布局......
  • 搭建项目前端系统基础架构
    Vue是什么Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。目前市面上有很多基于Vue重新封装的各种前端UI框架,集成比较容易,如Element,iView等,另外......
  • Tlias-前端开发
    Tlias准备工作安装依赖npminstallelement-plus--savenpminstallaxios配置ElementPlus//main.tsimport{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom&#......
  • 【前端Vue】Vue从0基础完整教程第2篇:day-08【附代码文档】
    Vue从0基础到大神学习完整教程完整教程(附代码资料)主要内容讲述:vue基本概念,vue-cli的使用,vue的插值表达式,{{gaga}},{{if(obj.age>18){}}},vue指令,综合案例-文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通......
  • nuxt3前端开发教程
    源码请移步:springboot+vue3+nuxt3+ts+minio开发的dsblog3.0前后端博客-java大师(javaman.cn)目录结构如下:一、nuxt3配置文件这段代码是一个Nuxt.js的配置文件,用于定义Nuxt.js项目的配置选项。Nuxt.js是一个基于Vue.js的通用应用框架,它简化了Vue.js项目的创建和开发过程。......
  • 前端提交数据后http状态码400
    报错如下:分析原因:前端Cookie使用过多,储存数据过大 解决方案:方案一:Nginx配置文件nginx.conf中把请求头内存调大client_header_buffer_size32k;large_client_header_buffers432k;方案二:前端删除部分Cookie,用H5中的本地储存localStorage代替<!DOCTYPEhtml><html>......