image.png
全程使用HbuilderX去开发。对uni-app的支持好，
image.png

image.png

image.png
https://www.dcloud.io/hbuilderx.html

image.png
Alpha会包含更多的内容。虽然可能会有一些bug。
标准版不会包含很多的插件，
我们下载App开发版，给我们集成好了，所有开发uni-app所有必备的插件包，开包即用，
image.png
按照提示下一步安装完成就可以了。

开发工具使用

第一打开会提示我们登陆，输入DCloud注册的账号就可以了。
image.png

新建uni-app的项目
image.png
如果只是单纯的开发小程序呢。就可以选择小程序
image.png
这里我们选择uni-app ，项目名称是test。下面是存放的路径，
选择默认的模板
image.png

直接创建，这里只是简单的演示， 就不选择启用uniCloud了。
image.png
右下角 会有提示在创建
image.png
项目上会有一个大写的U，表示是uni-app的项目
image.png
这里可以对项目进项编辑
image.png
文件图标的主题
image.png

image.png

运行注意事项

win10 注意启动HBuilder X的时候一定要用管理员身份启动
image.png
或者直接选择这个
image.png
image.png
然后就看到控制台在编译项目
image.png

F12切换到移动端的状态
image.png
调整到75%，可以更好的看效果。
image.png

vue-cli安装和运行

使用vue-cli之前先确认系统中是否安装了node
使用node -v来检测
image.png
安装vue cli。-g表示安装到全局
image.png
检测vue cli是否安装成功。vue -V注释是一个大写的V
image.png

首先进入我们的目录，然后使用命令去安装
image.png
dcloudio/uni-preset-vue 是dCloud的还一个包。test-uni-app是项目名称
image.png
等待安装的过程
image.png
选择默认的模板。使用键盘的上下键选择。
image.png
然后就会下载默认的模板了。
image.png
看到这个信息就表示工程已经完成了。
image.png
进入目录，然后就可以运行这个项目了
image.png
用VSCode打开项目 演示下和Hbuilder创建的羡慕的区别
这是一个vue的目录结构。
image.png
可以把src直接拖到Hbuilder X中运行。整个目录拖过去，也是可以运行的。
image.png
image.png
image.png
运行成功
image.png

image.png
还是建议大家用HX 开发，它对uni-app的支持度非常高。语法提示，
image.png
比如我们直接输入一个swiper的标签，
image.png
快速的，输出标签。这样的功能在其他的编辑器上是不存在的。
image.png

HBuilder X对vue的支持有多强？

https://ask.dcloud.net.cn/article/19601

结束