实用小工具

HBuilderX的Vue环境搭建

2019-06-18  本文已影响333人  飞扬code

整体感觉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
上一篇下一篇

猜你喜欢

热点阅读