开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
vue3 的生态系统 总体来说 和 vue2 区别还是很大的，不论是从构建工具，还是从状态管理 ， 下面咱们就主要从以下几个方面，来大致了解以下 vue3 推荐的 匹配的生态系统
构建工具
我们之前熟知的构建工具是 webpack， vue3 则突破性的 退出了 vite， 在 webpack 的生态很成熟的情况下， vite 需要有足够强的优势才能够让我们接受
- vite 是基于 Esbuild 以及浏览器 ES Module 的特性，让项目的启动和热更新速度明显加快，提升了前端开发者编辑速度，开发效率；另一方面它兼容了 Rollup 的插件机制，已经形成了丰富的生态。经过两年多的发展，官网所言非虚，Vite 正在逐步成为下一代的前端工具链！ vite 官网 cn.vitejs.dev/ 针对 vite 我现在也是正在学习中， 等完整的学习以后 可能会更新一篇针对 vite 的。
TypeScript
- 插件
vue3 的 ts 插件是 Volar （我们这里默认 IDE 都是 VScode）代码中我们需要使用
lang和defineComponent在使用了<script lang="ts">或<script setup lang="ts">后，<template>在绑定表达式中也支持 TypeScript。
<template> {{ (x as number).toFixed(100) }} </template>
<script lange="ts">
import { defineComponent } from 'vue'
export default defineComponent({
// 启用了类型推导
props: {
message: String
},
setup(props) {
props.message // 类型：string | undefined
}
})
<script>
状态管理
vue3 官方推荐的状态管理工具 应该使用 pinia， 当然 vuex 也是可以使用的， 我之前的更新有 pinia 的入门 和 简单实现 大家可以直接去看 一下 juejin.cn/post/709272… 这里就不再复述 pinia 和 vuex 的区别了。
组件库
组件库的选择并没有什么固定的了， 流行组件库都退出了 v3 的版本 如 element plus ， antd 等, 我们可以依据自己公司的环境来选择即可
路由管理
router.vuejs.org/zh/ vue-router vue3 使用 V4 版本
