vue3 介绍

Vue.js 3 是 Vue.js 框架的下一个主要版本，是 Vue.js 2 的继任者。Vue.js 3 引入了一些重大改进和新特性，旨在提高性能、可维护性和开发体验。以下是一些 Vue.js 3 的重要特点和改进：

1. Composition API（组合式 API）： Composition API 是 Vue.js 3 中引入的一种新的 API 风格，它允许开发者更灵活地组织和复用组件逻辑。相比 Vue 2 的 Options API，Composition API 更容易维护和测试，尤其适用于大型和复杂的应用。

<script setup>
  import { ref, computed, watch } from 'vue'

  const count = ref(0)

  const doubleCount = computed(() => count.value * 2)

  watch(count, (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`)
  })
</script>

2. Teleport（传送门）： Vue.js 3 引入了 Teleport 组件，允许你将内容渲染到 DOM 中的其他位置，这对于实现模态框、下拉菜单等功能非常有用。Teleport 可以帮助你更好地控制组件的渲染位置。

<template>
  <Teleport to="body">
    <div class="modal">
      <!-- Modal content -->
    </div>
  </Teleport>
</template>

3. Vue 3 的响应式系统： Vue 3 的响应式系统经过了全面优化，性能得到了显著提升。它引入了 Proxy 对象作为底层实现，使得 Vue 更快速和高效地追踪状态变化。

4. Fragment 和 Portals： Vue 3 支持使用片段（Fragment）来返回多个根元素，这样可以更灵活地组织组件的结构。此外，Portals 允许你在 Vue 组件之外渲染内容，比如在全局级别渲染通知或弹出窗口。

5. Suspense： Vue 3 引入了 Suspense 特性，可以更容易地处理异步数据加载和组件懒加载。这使得你可以更好地管理数据加载和页面加载状态。

6. 更好的 TypeScript 支持： Vue 3 提供了更完善的 TypeScript 类型支持，包括更强大的类型推断、支持定义组件 API、自动生成 TypeScript 类型等。

7. 更小的体积和更快的渲染性能： Vue 3 的代码体积更小，性能更高，包括更好的树摇动态性能、更少的运行时开销等。

8. Vue CLI 4： Vue CLI 4 是适用于 Vue.js 3 的官方脚手架工具，它提供了创建、开发和构建 Vue.js 3 项目的一套现代工具和配置。

这些是 Vue.js 3 的一些主要特点和改进。Vue 3 的目标是提供更好的开发体验和更好的性能，同时保持对 Vue 2 的兼容性，以便现有项目可以逐渐升级到新版本。如果你已经熟悉 Vue.js 2，学习和使用 Vue.js 3 应该会相对容易，并且带来更多的好处。如果你是新手，也可以直接学习 Vue.js 3，以获得更先进的特性和工具。

我之前写过一篇vue3框架的博客，但需要自己搭配路由，vuex，以及eslint等等，今天用最简单的方式，搭建一个vue3全家桶框架。

全局安装最近版本的 vue/cli

https://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli

yarn global add @vue/cli
# 或
npm install -g @vue/cli

选好一个文件夹，在地址栏输入cmd，进入命令行模式

输入 vue create <项目名称>

接下来依次选择

Manually select features

从上到下依次
Babel 很重要，涉及到项目的代码兼容性配置，建议勾选
typescript 你如果已经学会了ts就勾选，如果还没学会就不用
PWA（Progressive WEB APP）这个渐进式网络应用，涉及桌面添加图标，以及离线应用等等，一般用不上
router 很重要，除非你的项目只有一个页面
vuex 很重要 数据管理中心，项目有公用数据基本都得使用
css pre-precessors 是否使用样式预编译器 ，less，sass ，建议勾选
linter/Formatter 涉及eslint检测和eslint标准的选择，为了让整个项目的代码风格保持一致，建议勾选
unit testing 单元测试
e2e testing 端到端的测试，极少有公司会使用

选择3.x

是否允许对class和style绑定数据，推荐允许，这样做将更加自由，vue官网的介绍如下
https://cn.vuejs.org/v2/guide/class-and-style.html

使用Babel做转义, 与TypeScript一起用于自动检测，推荐使用

路由模式, 是否选择history模式，路由模式分为history和hash模式两种，根据项目特点进行选择吧

这里有三种样式预编译，选一种自己会的吧，不知道怎么选推荐选择less

选择eslint的规范，可以根据项目的实际情况进行选择

选择保存的时候就检测

将配置文件放在哪儿？ 一般来说都是在package.json文件夹中

是否保存上面的配置，再次确认，如果你配错了，就选择no

剩下的就按回车，等待项目的搭建

通过yarn serve 或者 npm run serve 就可以启动整个项目

为了方便我们开发，开发规范是必不可少的，可以使用prettier - code formatter
https://blog.csdn.net/glorydx/article/details/107183884