Vue3快速入门——HelloWorld
原创
前言
Vue3 是 Vue.js 的最新版本，它带来了许多新特性和改进。在本教程中，我们将通过一个简单的 Hello World 示例来快速入门 Vue3。如果后端新手想要入门前端Vue，建议来看看，而且建议学Vue3不要看Vue2了。Vue官网：https://cn.vuejs.org/guide/quick-start.html
步骤
针对后端人员，局部使用Vue，这样可以提高Vue的整合效率，降低学习成本，后端可能对前端的环境不熟悉，如果需要从配置node，安装vue全系统，估计学习时间要很长。所以如果后端人员想要快速上手Vue，可以使用局部使用Vue，在现有的前端HTML工程，引入Vue.js。然后主要通过下面四个步骤就行了。
步骤1 定义vue关联模块
步骤2 引入vue模块 在线CDN的引入方式，从vue.esm-browser.js获取到createApp
步骤3 创建Vue实例，挂载到app div上
步骤4 定义数据这些数据会跟上面绑定的div关联
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">{{ message }}</div>
</body>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue3!'
}
}
}).mount('#app')
</script>
</html>上述代码，不是看起来很简单，import导入，其实等同于java类中引用其他包的类
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'可看出这样 createApp == StrUtil，cn.hutool.core.util = https://unpkg.com/vue@3/dist/vue.esm-browser.js
import cn.hutool.core.util.StrUtilcreateApp({ }) 相当于调用这个类。
在html 中绑定的div只要只用{{ message }} 就可以获取到vue app中定义的数据，这个数据可以动态改变，可以在vue请求接口，然后重新赋值到message 中。上述代码浏览器直接打开可以看到Hello Vue3！。
总结
通过上述hello vue入门，是不是感觉vue上手其实很简单，后端人员不用恐惧前端，局部使用对后端人员十分友好，只要后端人员知道前端三剑客，在原有的html迁入vue即可，其他添加功能可以到官网进行参考。不过如果有时间的话，也可以去系统学习前端技术，全面使用Vue，通过组件的方式深入了解。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。