HBuilder X 设置保存时编译

已于 2022-09-21 10:17:35 修改
阅读量1.1k 收藏
点赞数
分类专栏： 开发工具 uni-app 文章标签： HBuilder uni-app
于 2022-09-21 10:15:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xhwnous/article/details/126967009
版权

一.上图-总步骤图-记住编号

  二.第4步README截图

三.第5步配置

"key": "ctrl + s",
"onDidSaveExecution": true

 四.保存，退出HBuilder X 重新打开生效

钬码狼酷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Hbuilderx离线打包详细教程
06-20
本人小白，刚接触app，由于Android Stuido原生开发比较困难，所以采用Hbuilderx进行h5开发，由于使用HbuilderX云打包要进行排队，而且要付费，考虑到以后项目在上线后，若遇到紧急bug修复，采用云打包模式有可能还要...
如何用HbuilderX开发vue项目?
热门推荐
qq_41512822的博客
12-30 4万+
一、安装node 1、下载地址为：https://nodejs.org/en/ 2、一路点击Next，检查是否安装成功 　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm...
HbuilderX中的less保存文件后自动编译为css的解决方案
kyle1211的博客
03-10 699
json文件-->将“onDidSaveExecution”的值改成true-->重启HbuilderX即可保存less的时候自动生成css文件。在工具-->插件配置-->compile-less-->写完less文件后，右击-->外部命令或插件-->less。工具-->插件安装-->安装less编译插件。
Less知识点记录（包含HBuilderx保存自动编译Less设置方法）
奔跑的面条博客
07-23 3889
一、HBuildex编译设置（已配置node与Less插件） 本人使用的是HbuilderX编译,可以实现保存自动编译，在配置文件设置key:"ctrl+s"和onDidSaveExecution:"true" 这里是手动编译 二、代码学习模块 使用的是css的模板，所以有些地方会有些颜色不对应 // //******************************************...
Hbuilder X 自动保存代码
lhz_333的博客
03-02 1万+
使用 Hbuilder X 编写代码时，总是忘记保存，本文主要记录下失焦自动保存设置。
uni-app：微信小程序从HBuilderX下载到编译运行项目
chenzimin_blog
09-15 2326
目录一、工具和项目二、工具配置1、导入小程序项目2、设置运行配置3、微信开发者工具配置4、小程序账号配置三、运行处理1、运行项目2、错误处理2.1、插件没有安装提示2.2、小程序端口没有配置报错2.3、不校验合法域名设置 一、工具和项目 1、微信小程序工具下载 2、HBuilderX工具下载 3、小程序下载到本地 二、工具配置 1、导入小程序项目 打开HBuilderX，导入项目，如下图： 2、设置运行配置 打开HBuilderX的偏好设置： 设置需要运行的配置地址： 3、微信开发者工具配置 打开服务端
HBuilderX 编辑器 设置 less 预编译
板砖工KO水泥匠
04-09 1836
1.在 HBuilderX 中安装 less 编译插件 【流程】 第一步：安装插件 工具 ==> 插件安装 ==> less编译 ==> 安装 第二步：配置 package.json 文件 工具 ==> 插件配置 ==> 选择刚刚安装的 less 插件 【compile-less】 ==&g...
HBuilderX安装.7z
07-16
这是一个编译器，HBuilderX安装包，装上即能使用，编译网页非常方便。
HBuilderX-3.1.11 编译软件包
10-29
这是一个编译器，HBuilderX安装包，这个软件支持各种的HTML代码 还支持各种的javascript代码的撰写 而且这个软件还是特别的好用 并且还特别的简易，装上即能使用，编译网页非常方便。
HBuilderX.2.2.2.20190816.zip
08-23
语法提示精准、全面、细致，转到定义、重构完善提供比其他工具更优秀的vue支持大幅提升你的vue开发效率清爽护眼界面清爽简洁，绿柔主题经过科学的脑疲劳测试，最适合人眼长期观看的主题界高效极客操作HBuilderX对字...
HBuilderX uniapp打包内存溢出解决放案.zip
05-20
uniapp项目体量过大时，打包H5会报错， - process out of memory 解决放案： 替换HBuildX内置\... 添加\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-72\binding.node文件
uni-app中SQLite数据库的配置与使用
paradoxaaa_的博客
05-18 163
1、在uni-app项目的manifest.json 将SQLite数据库模块打开。3、在需要操作数据库的vue文件中引用,下面是示例代码。
uni-app 自定义图片按钮
浅醉樱花雨的专栏
05-18 750
uni-app自定义图片按钮
uniapp中实现保存图片，复制信息功能函数的封装
weixin_57031986的博客
05-15 245
uniapp中实现保存图片，复制信息功能函数的封装
使用uniapp编写的微信小程序进行分包
qq_45569925的博客
05-21 295
由于小程序发布的时候每个包最多只能放置2MB的东西，所以把所有的代码资源都放置在一个主包当中不显示，所以就需要进行合理分包，，但是分包后整个小程序最终不能超过20MB。一般情况下，我习惯将tabbar页面都放置在主包中，其余的相关页面都放置到对应的分到当中。比如：在我的界面可以点击之后进入到个人中心页面、订单页面、地址管理页面等等，那么这些页面我就会放置在package_home的分包当中。
uni-app 开发准备工作(一次开发，多端部署)
q322359的博客
05-16 246
uni-app是一个使用开发所有前端应用的框架，开发者编写，可）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp h5项目切换导航栏及动态渲染按钮颜色
m0_72929120的博客
05-21 55
【代码】uniapp h5项目切换导航栏及动态渲染按钮颜色。
uniapp移动端骨架屏流程
m0_57005111的博客
05-16 214
然后把这两个文件中的代码粘贴到新创建的相应文件目录下；然后删除该页面中没用的代码以及做对应的（报错或者是类型错误，通常是把一些值做动态绑定）处理即可。1.使用微信开发者工具来生成骨架屏；在分窗模式下选择页面信息，下拉选择生成骨架屏；他会基于当前页面生成骨架屏的样式。2.判断数据是否加载完毕，未完成显示骨架屏；完成了就关闭骨架屏并渲染页面。会自动生成这两个文件；一个是html结构文件，一个是css样式文件。
uni-app App端实现文字语音播报（Ba-TTS）
最新发布
路虽远行则将至，事虽难做则必成。
05-21 171
最近在遇到消息提示语音播放出来，查了一圈文档发现并没有自带api后面想起支付宝收钱播报，不受限与系统环境和版本环境（后面查阅他是音频实现的）如果是由安卓端需要语音播放功能-直接使用Ba-TTs救急（需要付费20元）
hbuilderx配置vue编译环境
06-28
### 回答1： HBuilderX是一款非常流行的前端开发工具，它支持多种编程语言，包括Vue。要配置Vue编译环境，请按照以下步骤进行操作： 1. 首先，确保你的电脑上已经安装了Node.js。如果没有安装，可以到Node.js的官方网站上下载安装包进行安装。 2. 打开HBuilderX，在菜单栏中选择“工具”>“插件市场”，搜索“vue”插件并安装。 3. 安装完成后，在菜单栏中选择“文件”>“新建”>“项目”，选择“Vue.js”作为项目类型，输入项目名称和保存路径，然后点击“创建”按钮。 4. 创建项目后，HBuilderX会自动安装Vue.js相关的依赖包，这个过程可能需要一些时间。安装完成后，在项目中打开“package.json”文件，在“dependencies”中可以看到Vue.js的版本信息。 5. 在HBuilderX中，可以使用“终端”面板执行命令，使用npm安装其他需要的依赖包，例如vue-router和vuex等。 6. 配置好依赖包后，就可以在HBuilderX中开始编写和调试Vue.js应用程序了。可以使用“运行”菜单中的“运行到浏览器”选项来在浏览器中查看应用程序运行效果。 ### 回答2： HBuilderX是一款非常优秀的多平台开发IDE，可以用于开发多种语言的项目。其中Vue是一种非常流行的前端框架，因此在HBuilderX中配置Vue编译环境是很有必要的。下面是HBuilderX配置Vue编译环境的详细步骤： 一、安装node.js HBuilderX需要node.js作为编译环境，因此需要首先安装node.js。官网下载最新版本的node.js进行安装即可。 二、安装Vue-Cli Vue-Cli是Vue的一个脚手架工具，用于创建Vue项目模板。这里我们需要使用命令行安装Vue-Cli。打开命令行工具，输入以下命令： npm install -g vue-cli 三、创建Vue项目 使用HBuilderX创建Vue项目，步骤如下： 1. 点击菜单栏中的“文件”->“新建”->“项目”->“Vue.js”，弹出“新建Vue.js项目”窗口。 2. 在“新建Vue.js项目”窗口中输入项目名称、项目位置等信息。在“模板”选项中选择“webpack”。 3. 点击“创建”按钮，创建Vue项目。在弹出的“确认安装依赖”窗口中点击“确认”按钮，等待HBuilderX自动安装依赖。 四、开发Vue项目 此时在HBuilderX中打开Vue项目，即可开始开发Vue项目了。在编写Vue组件时，可以使用HBuilderX提供的“Vue语法提示”功能，大大提高开发效率。 五、编译Vue项目 在HBuilderX中编译Vue项目，需要使用命令行工具。在菜单栏中选择“工具”->“命令行”，即可在HBuilderX中打开命令行窗口。在命令行窗口中输入以下命令即可编译Vue项目： npm run build 六、总结 以上就是HBuilderX配置Vue编译环境的详细步骤。配置完成后，我们就可以在HBuilderX中愉快地开发Vue项目了。HBuilderX作为一款非常强大的IDE，为我们提供了非常便捷的开发体验。 ### 回答3： HBuilderX是一款优秀的前端开发工具，其中一个很重要的功能就是Vue的编译环境配置，下面就简单介绍一下如何进行该环境配置。 1. 安装Node.js。 在HBuilderX中打开“工具”-“插件市场”，搜索“node.js”，按照提示进行安装。安装完成后，在HBuilderX中输入“node -v”，如有正常输出，则表示Node.js已安装成功。 2. 安装Vue-cli。 在HBuilderX中打开“工具”-“终端”，输入以下命令： npm install -g vue-cli 该命令会自动安装Vue-cli。 3. 创建Vue项目。 在HBuilderX中打开“文件”-“新建”-“项目”，选择“Vue.js”模板，继续进行项目创建。 4. 在终端中进入项目目录。 在HBuilderX中打开“工具”-“终端”，输入以下命令： cd 项目目录 其中，“项目目录”是指第3步中创建的Vue项目所在的目录名称。 5. 安装依赖。 在终端中输入以下命令： npm install 该命令会自动安装Vue项目所需的依赖。 6. 启动Vue项目。 在终端中输入以下命令： npm run serve 该命令会启动Vue项目，并在浏览器中打开。 至此，HBuilderX的Vue编译环境配置已完成，可以开始进行Vue的开发工作了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值