已安装好node.js 16.14.2
一、项目脚手架
第一步：
npm install -g @vue/cli 或 yarn add -g @vue/cli
第二步：
vue create 项目名字（尽量用英文）
第三步：运行项目
npm run serve
安装新的软件包，使用npm i 依赖包的名字 或 yarn add依赖包的名字
二、vue相关概念：
vue3渐进式javaScricpt框架
特点：组件化、虚拟dom、diff算法
vue文件以vue结尾，是一个SFC（Single-File-Component）单文件组件
遵循MVVM 架构、Model-ViewModel, 重点是实现了数据的双向绑定，指令用的是v-modle、v-bind、v-on
理解M-A-VM模型，VlewModel 是实现虚拟dom、diff算法的核心点
内置指令：
v-text：插值绑定、语法也可以是{{ }}
v-html:绑定html代码片段，相当于是原生的innerHtml、有安全性问题，容易XSS攻击
v-show：显示一个dom元素，dom元素不会被删除、
v-if、v-else-if、v-else:动态显示一个dom元素，条件成立，dom元素才会真正显示出来，否则移除（不新增）真实dom
v-for ：循环当前所在的元素，当前！当前！当前！
v-on：简写@ 绑定事件，鼠标事件，键盘事件，例如：@click，@dbclick、@mounseup、@mousedown、@mousemove
v-bind:绑定属性指令，是组件的prop或者attribute（width、height、style）
v-model：值的双向绑定，通常用与input（text、password、radio、checkbox、number）、select
v-slot：声明具名插槽或是期望接收props的作用域插槽
<!-- 具名插槽 -->
<BaseLayout>
<template v-slot:header>
Header content
</template>
<template v-slot:default>
Default slot content
</template>
<template v-slot:footer>
Footer content
</template>
</BaseLayout>
<!-- 接收 prop 的具名插槽 -->
<InfiniteScroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</InfiniteScroll>
v-cloak：防止闪现指令、 v-once:静态内容指令、v-pre：跳过编译指令
