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)

(0)

相关推荐

  • vue项目打包成桌面应用

    vue项目打包成桌面应用

  • HBuilderX配置外部服务器(tomcat)查看编辑jsp界面

    一.第一种方法,通过启动本地tomcat,查看jsp 在tomcat的webapps目录下创建文件夹HBuilderX 打开HBuilderX软件,点击文件/导入/导入本地文件,找到tomcat的we ...

  • 02-第一个Vue程序

    目录 1.  准备工作 2.  编写代码 2.1 引入Vue 2.2  添加一个div标签 2.3 创建Vue实例 2.4 保存(Ctrl s)并查看结果 2.5 总结 2.6 完整代码 1.  准备 ...

  • Vue基础(一):Vue的概述与基本使用

    Vue基础(一):Vue的概述与基本使用

  • 12 手写配置启动一个 vue2 项目

    目录 学习 vue2.0 还有没有意义? 手动创建项目,添加 vue 插件 关于版本号 准备工程化编译,建造必须的文件 package.json 页面模板 public/index.html App. ...

  • 来写我们的第一个网页

    Hbuilder与浏览器的配合使用 上一节我们了解并安装了Hbuilder 和chrome谷歌浏览器的安装.这一小节我们来通过编写一个简单的网页,来看一下Hbuilder和谷歌浏览器的使用方法及各种标 ...

  • mui.DtPicker is not a constructor解决方案

    问题记录:mui.DtPicker is not a constructor 坑惨了搞了半天,研究源码后把Hbuilder项目里的文件扒出来,解决(主要是缺少文件,网上很难找到) 步骤: 1.新建Hb ...

  • FANUC 第5课 创建一个搬运项目

    FANUC 第5课 创建一个搬运项目 每一位读者都是我分享的动力,感谢大家关注! ******************************** 如何获取更多经典文章? 关注公众号A自动化项目实战, ...

  • 搭建VUE项目框架(2) 创建项目

    搭建开发环境 Node.js官方地址:https://nodejs.org/zh-cn/ 下载安装版本:14.15.4长期支持版(LTS) Visual Studio Code官网地址:https:/ ...

  • Vite尝鲜:快速创建一个vite项目

    简介: Vite 是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包.比webpack打包更加快速. 它主 ...

  • 使用IDEA创建一个SpringBoot项目

    前言 很多小伙伴在使用了IDEA之后,会发现用IDEA创建一个SpringBoot项目是一个很简单的事情. 问题描述 使用IDEA创建一个SpringBoot项目. 解决方案 1.首先新建项目. 2. ...

  • Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  • 一个嵌入式项目从0开始开发的大致流程

    从0开始做一个嵌入式开发项目的大致流程如下: 了解需求 和客户对接了解需求,形成需求文档,双方签字,并注明后续是否可以增加需求或者方案调整. 召集人员汇聚资源 根据需求文档召集项目组,项目组一般需要硬 ...

  • 赚钱的想法和一个小项目

    大家好,我是老钱. 今天有时间,来聊聊关于赚钱的一些想法. 我写,你看. 我做公众号时间比较短,满打满算1年时间,文笔,经验,阅历,格局等多方面和大佬都不能比. 要学习的地方还有很多很多. 但我也有我 ...

  • 九转领域115:一个小项目

    你好,我是九转! 很早就有把我所有的文章都下载下来的想法 之前想的是,把文章都下载下来,整理好,放在一个文档里,方便大家阅读. 如果有人需要的话,还可以顺势卖点小钱 直到这段时间,突然发现了还真有人这 ...

  • (二)MyBatis从入门到入土——开发一个Mybatis项目

    这是mybatis系列第2篇.没看前文的建议先去[Java冢狐]公众号中查看前文,方便理解和掌握这篇文章主要接着前文介绍了如何创建并使用Mybatis. 实战演练 上一篇文章中我们大体介绍了MyBat ...