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

前言

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项目的创建：

<!DOCTYPE html>

<html>

<head>

<meta  charset="utf-8">

<title>算法与编程之美</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div  id="hello-vue">

  {{ message }}

</div>

<script>

const HelloVueApp = {

  data() {

    return {

      message: 'Hello world!!'

    }

  }

}

Vue.createApp(HelloVueApp).mount('#hello-vue')

</script>

</body>

</html>    

       8595ed5f14a2cd71ab7c0754eccf2b14.png

结语

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

实习编辑：衡辉

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

# 算法 # python # 人工智能
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue