uni-app的开发工具HBuilder的使用和下载万能的Uni-app,是使用 Vue.js 开发所有前端应用的框架。

万能的Uni-app,是使用 Vue.js 开发所有前端应用的框架。

我们可编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

我们的Uni-app，官方有推荐使用的工具HBuilderX来开发项目。

访问 HBuilderX 的官网首页（www.dcloud.io/hbuilderx.h… ）安装 HBuilderX

将下载的 zip包 进行解压缩
将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
双击 HBuilderX.exe 即可启动 HBuilderX。

需要安装scss/sass 编译（插件市场：ext.dcloud.net.cn/ ）

快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

工具=>设置 =>源码视图 源码视图下可用的参考配置：

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}

5.源码视图参数设置.png

点击文件=>新建=>项目

6.新建项目.png 1.输入页面名称 home 2.使用Scss的页面 3.选中在pages.json中注册 4.创建在我们项目的page中会有对应的 home目录 home.vue文件 7.项目.png 在全局的文件page.json文件page数组中会有对应的对象页面。此处设置页面的标题。

8.项目.png 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

在 HBuilderX 中，配置“微信开发者工具”的安装路径 因为uniapp依赖于微信工具开发，所以需要指定小程序开发工具安装目录。

11.运行配置.png 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

成功.png