HBuilderX
HBuilder,H是HTML的缩写,Builder是建设者。
它是为前端开发者服务的通用IDE,或者称为编辑器。与vscode、sublime、webstorm类似。
它可以开发普通web项目,也可以开发DCloud出品的uni-app项目、5+App项目、wap2app项目。
目前有800万开发者在使用HBuilder。
老版的HBuilder是红色logo,已于2018年停止更新。绿色logo的HBuilderX是新版替代品。
除了服务前端技术栈,它也可以通过插件支持php等其他语言。
相比于竞品,它的优势有:
运行速度快(c++内核)
对markdown、vue支持更为优秀
还能开发App、小程序,尤其对DCloud的uni-app、5+App等手机端产品有良好的支持
HBuilderX下载
HBuilderX文档系统:包括使用文档、技巧、cli工具、插件开发API手册等。https://hx.dcloud.net.cn/
官网:https://www.dcloud.io/
uni-app:https://uniapp.dcloud.io/
uni-app学习入口:https://uniapp.dcloud.net.cn/resource.html
一、出现一下问题需要安装node环境
'npm' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
node下载地址:http://nodejs.cn/download/
https://nodejs.org/download/release/
https://nodejs.org/zh-cn/download/releases/
二、一个uni-app工程,默认包含如下目录及文件:https://uniapp.dcloud.net.cn/tutorial/project.html
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ └─android Android原生资源目录 详见
├─hybrid App端存放本地html文件的目录,详见
├─wxcomponents 存放小程序组件的目录,详见
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss 这里是uni-app内置的常用样式变量