HbuilderX创建第一个vue项目

Posted 算法与编程之美

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HbuilderX创建第一个vue项目相关的知识,希望对你有一定的参考价值。

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

前言

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

问题描述

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

解决方案

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

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

3.开始vue项目的创建

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

接下来我们可以开始第一个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>    

       

结语

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

实习编辑:衡辉

稿件来源:深度学习与文旅应用实验室(DLETA)

以上是关于HbuilderX创建第一个vue项目的主要内容,如果未能解决你的问题,请参考以下文章

vue项目通过hbuilderx打包为apk

vue项目通过hbuilderx打包为apk

使用HBuilderX将vue项目打包成app

超详细!新手如何创建一个Vue项目

使用HBuilderX实现打包vue项目成app

解决hbuilder打包vue项目app点击手机返回键直接退出app的问题