HBuilderX的Vue环境搭建

整体感觉HBuilderX下的Vue要比vscode的配置要简单不少，初学者可以使用这个软件进行学习。

下载地址：http://www.dcloud.io/hbuilderx.html

image.png

绿色版不需要安装即可使用
打开软件新建一个项目

image.png

选择vue

image.png

生成的项目列表结构

image.png

node安装

vue需要node的支持，所以需要安装下node
下载地址：https://nodejs.org/en/download/

image.png image.png image.png image.png image.png image.png

HBuilder关于node配置

image.png

命令行检查node及其npm版本

image.png

工程中开始npm安装

image.png

如果第一次可能需要下载内置插件

image.png
image.png

再次npm installl

image.png

如果出现npm install安装卡住的情况，可以将node_modules删除重新install

image.png

完成后

image.png

编译

image.png
image.png

启动npm

image.png
image.png

访问本地地址：http://localhost:8080/

image.png