HBuilderX的Vue环境搭建
2019-06-18 本文已影响333人
飞扬code
整体感觉HBuilderX下的Vue要比vscode的配置要简单不少,初学者可以使用这个软件进行学习。
下载地址:http://www.dcloud.io/hbuilderx.html
![](https://img.haomeiwen.com/i16823531/28ef1abab2ec34c9.png)
绿色版不需要安装即可使用
打开软件新建一个项目
![](https://img.haomeiwen.com/i16823531/1f3cf16fa44b5f99.png)
选择vue
![](https://img.haomeiwen.com/i16823531/f56c85d63b009cea.png)
生成的项目列表结构
![](https://img.haomeiwen.com/i16823531/6f085efd1702ca39.png)
node安装
vue需要node的支持,所以需要安装下node
下载地址:https://nodejs.org/en/download/
![](https://img.haomeiwen.com/i16823531/4914311efa4bc209.png)
![](https://img.haomeiwen.com/i16823531/b9c05b1634cbb249.png)
![](https://img.haomeiwen.com/i16823531/80528434112bf03b.png)
![](https://img.haomeiwen.com/i16823531/92498bb3020e1257.png)
![](https://img.haomeiwen.com/i16823531/086ee353c7cad11e.png)
![](https://img.haomeiwen.com/i16823531/efdb7faacb4fa28e.png)
HBuilder关于node配置
![](https://img.haomeiwen.com/i16823531/102cc2aeb6ba83d4.png)
命令行检查node及其npm版本
![](https://img.haomeiwen.com/i16823531/49a0d0b1714f6a44.png)
工程中开始npm安装
![](https://img.haomeiwen.com/i16823531/8dd0b89d3ee7bf84.png)
如果第一次可能需要下载内置插件
![](https://img.haomeiwen.com/i16823531/ec627ce5b000c657.png)
![](https://img.haomeiwen.com/i16823531/7538775ae01992fd.png)
再次npm installl
![](https://img.haomeiwen.com/i16823531/17bfe79ba2e5ae13.png)
如果出现npm install安装卡住的情况,可以将node_modules删除重新install
![](https://img.haomeiwen.com/i16823531/ece075d4c05b411a.png)
完成后
![](https://img.haomeiwen.com/i16823531/b72177c48e62f7e1.png)
编译
![](https://img.haomeiwen.com/i16823531/1c615b4a939ee36f.png)
![](https://img.haomeiwen.com/i16823531/e96e6b9856adfa4f.png)
启动npm
![](https://img.haomeiwen.com/i16823531/c2386909e718913b.png)
![](https://img.haomeiwen.com/i16823531/63e6025428dd47dd.png)
访问本地地址:http://localhost:8080/
![](https://img.haomeiwen.com/i16823531/0e815bc6b04a6eac.png)