0.2、Vue 开发工具 HbuilderX

拼搏现实的明天。 2022-10-26 04:58 175阅读 0赞

### 文章目录 ###

*   *   *  前言
         *  真的是快的飞起的HbuilderX 。
         *  一图胜千言
         *  废话不多说了，官网啥都有
         *   *  HbuilderX 安装包下载地址
             *  使用 插件 创建 Vue 项目
             *  项目结构介绍
             *  使用 HubuilderX 启动 Vue 项目
             *  HbuilderX 的预览功能

### 前言 ###

在本地构建 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的开发效率。

### 一图胜千言 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]

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

#### HbuilderX 安装包下载地址 ####

> 支持 Windows 和 Mac

[https://www.dcloud.io/hbuilderx.html][https_www.dcloud.io_hbuilderx.html]

#### 使用 插件 创建 Vue 项目 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70 2]

#### 项目结构介绍 ####

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

![在这里插入图片描述][20210204005406631.png]

#### 使用 HubuilderX 启动 Vue 项目 ####

[https://learning.dcloud.io/\#/?vid=14][https_learning.dcloud.io_vid_14]

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

![在这里插入图片描述][20210204005933950.png]

#### HbuilderX 的预览功能 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]: /images/20221024/5cf90c2c83bd41fe8552344bf52e6ec7.png
[https_www.dcloud.io_hbuilderx.html]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70 1]: /images/20221024/98f58806f8424266a589484b59050cef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70 2]: /images/20221024/6e1c657b70354bc6944edefb64adc428.png
[20210204005406631.png]: /images/20221024/ff0a82c8287040eeb53fc4e8a9d6fede.png
[https_learning.dcloud.io_vid_14]: https://learning.dcloud.io/#/?vid=14
[20210204005933950.png]: /images/20221024/a7e1527ba8284c32be747ac7dc402e71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70 3]: /images/20221024/21067e4ae7684035b00639c64922b4de.png