Vue3官方文档地址：v3.cn.vuejs.org/
以前的官方脚手架@vue-cli也可以用，但这里推荐一个更轻快的脚手架Vite### 1.1、Vite简介
Vite（法语意为 "快速的"，发音
/vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
你可以在 为什么选 Vite 中了解更多关于项目的设计初衷。
1.2、创建项目
创建项目命令：
npm init vite
创建出来的项目中并没有node_modules文件夹，所以按照上面的指引,进入项目文件夹后，执行npm i
二、更换Vue模板支持工具
以前我们用的Vue模板支持的VScode扩展是Vetur，使用TS+Vue3建议换成更加友好的Volar。
全程为： Vue Language Features (Volar)
三、项目相关命令解析
package.json中提供了三个命令：
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview" // 启动提供预览的服务器（这里预览的是打包的）
},
npm run dev --host // 开发环境下的启动
npm run build // 打包项目，项目目录多一个dist文件夹
npm run preview // 启动提供预览的服务器（这里预览的是打包的）
四、生命周期钩子函数
官方文档：v3.cn.vuejs.org/api/composi…
components文件夹下创建01-App.vue文件：
main.ts文件修改成：
import { createApp } from 'vue'
import App from './components/01-App.vue'
01-App.vue文件中：
<script lang='ts'>
import { defineComponent,onBeforeMount, onMounted, onUpdated, onUnmounted } from "Vue"
export default defineComponent({
setup () {
onBeforeMount(()=>{
console.log("执行了onBeforeMount");
});
onMounted(()=>{
console.log("执行了onMounted");
})
console.log("执行了setup");
return {
}
}
})
</script>
