一，开发工具

1，hbuildx安装：https://www.dcloud.io/hbuilderx.html
2，node.js安装：https://nodejs.org/zh-cn/
解压安装后如下，我把这个放在d盘下面

3，node -v查看版本信息

4，如上图可知，我在nodejs下新建了两个文件夹： node_global;node_cache。目的是用来放安装过程的缓存文件以及最终的模块配置位置，然后将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。cmd打开目录提示符，进行一下操作，不过后面的路径为自己解压后并创建的文件目录的路径

npm config set prefix "D:\nodejs\node_global";
npm config set cache "D:\nodejs\node_cache";

设置完成之后，可以发现出现如下界面

5，配置环境
用户变量的Path中加入 D:\nodejs\node_global

系统变量中，新建一个变量名为NODE_PATH,变量值为 D:\nodejs\node_global\node_modules,当然这里需要你的安装的实际路径

系统变量中，点开编辑，新建一个 D:\node.js

6,测试
npm -v,查看npm的版本

二，HbuildX的环境配置

1，打开HbuildX，如下

2，打开工具，点击设置，打开运行设置

3，输入如下，该路径与安装的nodejs下面的几个文件时对应的，如npm路径以及node路径


4，完成以上步骤之后，就可以正式的使用HbuildX进行开发vue项目了

三，使用HbuildX搭建vue-cli脚手架项目

1，创建项目，输入项目名称，并选中vue-cli项目，点击创建即可

2，完成创建项目之后，等待一会，项目就创建好了
3，出现一下界面，项目就算正式创建好了

4，由于我们上面在选择运行终端类型为外部终端，所以呢需要在外部进行点击命令运行了。右键项目名称，打开外部命令，

5，先点开外部命令1，npm run build
并在后面可以输入外部命令，如安装路由等插件
6，执行2 ：npm run server，用于启动服务，就能在浏览器上访问了

7，出现以下熟悉的界面，我们的项目初始阶段就搭成功了

8，浏览器访问。地址为 http:localhost:8080,出现以下界面，vue-cli即vue脚手架项目就算正式搭建成功了

四，点评使用HbuildX开发

很多人可能会选择WebStorm或者VsCode开发，都是一样的，那个可能需要安装webPack安装工具。说麻烦也麻烦，说简单也简单。不过选择记事本开发前端是不是显得更加的高大尚呢。只能说仁者见仁智者见智吧