本案例使用vue3进行学习记录，和vue2有些是通用的。
1.需要了解HTML，CSS，JavaScript。
2.了解Node和NPM，node是vue的开发环境，npm是依赖管理包，npm就和Java的maven一样，和c#的NuGet一样，都是管理包的工具。
3.打包工具，webpack和vue/cli，都是对整个web程序进行打包的，二选一即可，一般使用自带的vue/cli打包。
4.开发vue的时候有2种方式。
一是：直接引入vue.js文件，就是在官网下载好文件，然后对文件进行引入。
二是：使用node环境进行创建vue项目。
2选1都可以，然后选择市面上的前端开发工具，VScode或者HBuilderX，本文以后选择使用HBuilderX，因为我感觉比较轻量级。核心是，无论选择那个开发工具，2种方式是不会变化的，必须选择其一，当然没有必要混合在一起，多此一举。
下面分别对2种方式进行实例操作。推荐使用第二种，更加符合实际工作模式。
一是直接引入
1.官网下载快速上手 | Vue.js，使用CDN的方式
2.使用HBuilder X建立一个项目，如图所示
3.然后把刚才的命令复制进去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<h1>{
{ message }}</h1>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
点击运行，效果
这样就是一个使用CDN方式创建的vue程序，然后很多业务逻辑都以这样的格式写就行了，这种不适合实际项目开发。下面我们介绍使用node的方式创建。
二是使用node
这部分单独提取出来后，整理了一下
参考，使用HBuilder X开发Vue3+node+element-plus
使用HBuilder X开发Vue3+node+element-plus_故里2130的博客-CSDN博客_hbuilderx vue3