HbuilderX创建第一个vue项目

古城微笑少年丶 2022-08-28 10:48 280阅读 0赞

**本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。**

前言

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称为HX。

问题描述

在进行vue项目的开发之前，选择一款好的开发软件可以达到事半功倍的效果，HBuilderX在vu方面做了大量的优化，其体验感远超其他的开发工具。下面小编将通过一个简单的案例实现vue在Hbuilder上的实战演练。

解决方案

1.打开HbuiderX最新版，选择新建

![84b5a5a17b820bca346c6a7ffed69844.png][]

2.创建含有vue-cli默认项目的vue项目

![bce2504d5d61f1d09da36defc5529d43.png][]

3.开始vue项目的创建

![0310cf620f38f2b8af2a046ef18bf4d0.png][]

4.在新建的《算法与编程之美》的文件夹中找到src下的components文件夹，以后与vue有关的项目我们都可以在该文件夹中进行创建。

![432c9d207fc2efbae0b72e3610120b4f.png][]

接下来我们可以开始第一个vue项目的创建：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta &nbsp;charset="utf-8"&gt;&lt;title&gt;算法与编程之美&lt;/title&gt;&lt;script src="https://unpkg.com/vue@next"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div &nbsp;id="hello-vue"&gt;&nbsp; { { message }}&lt;/div&gt;&lt;script&gt;const HelloVueApp = { &nbsp; data() { &nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; message: 'Hello world!!'&nbsp;&nbsp;&nbsp; }&nbsp; }}Vue.createApp(HelloVueApp).mount('#hello-vue')&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img-blog.csdnimg.cn/img_convert/8595ed5f14a2cd71ab7c0754eccf2b14.png" alt="8595ed5f14a2cd71ab7c0754eccf2b14.png"></td> 
 </tr> 
 </tbody> 
</table>

结语

针对如何创建第一个vue项目问题，提出使用一个好的开发软件Hbuilder进行项目的创建既不需要安装node.js等插件，也无需进行npm等测试，未来将继续利用HbuilderX进行vue项目的开发。

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）

[84b5a5a17b820bca346c6a7ffed69844.png]: /images/20220828/7741749b0de14412bcf7dd534ada6da1.png
[bce2504d5d61f1d09da36defc5529d43.png]: /images/20220828/a0b137b6e4684d069500b1e0c8026c2e.png
[0310cf620f38f2b8af2a046ef18bf4d0.png]: /images/20220828/dd0081788ca640e69a74d39a0b9db718.png
[432c9d207fc2efbae0b72e3610120b4f.png]: /images/20220828/f8bc170aad0448deb8115b8946e5e958.png