前言

在本地构建 Vue 需要的基础组件 npm、webpack、vue-cli 之后，我们就可以通过命令行去构建并运行 Vue 项目了，但是一款优秀的 IDE 是必不可少的， 使用 Idea 也可以进行Vue开发，但是本文介绍的是另一款优秀的软件 HbuilderX —— 让人爱不释手。

真的是快的飞起的HbuilderX 。

以下内容来自 HbuilderX 官网
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

一图胜千言

废话不多说了，官网啥都有

HbuilderX 安装包下载地址

支持 Windows 和 Mac

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

使用 插件 创建 Vue 项目

借助于 HbuilderX 我们可以直接使用现成的插件来创建 Vue 项目
文件->新建->项目

项目结构介绍

使用插件创建的项目符合 单文件组件 规则，其中 main.js 是整个 Vue 项目的实际入口

使用 HubuilderX 启动 Vue 项目

https://learning.dcloud.io/#/?vid=14

可以选择运行到浏览器，直接在浏览器中查看，也可以选择运行到终端，则可以直接在 HbuildeX 中查看

HbuilderX 的预览功能

可以在 HbuilderX 中直接访问发布后的项目，并且可以开启控制台模式