Vue3+Vite初体验

一、为何要使用？

1. 为何要使用Vue3?

你说Vue2用的好好的，为啥要用Vue3呢？就因为它是最新版？不，还不是因为Vue3它是真的香嘛！

① 组合式API，编码更加自由

Vue3在Vue2的选项式API基础上新增了组合式API，组合式API不再像选项式API那样拘泥于固定的对象结构，而是使用函数式编程，更加自由，耦合度更低。例如：

<script setup>
import { ref } from "vue";

const count = ref(0); 
function countUp() {
  count.value++;
}
</script>

<template>
    <p>{{ count }}</p>
    <button @click="countUp">Click me!</button>
</template>

② API写法统一，减少记忆负担

例如，Vue2中的$mount()在Vue3中变成了mount()；删除事件修饰符.sync，统一用v-model替代，等等。

③ 数据响应式优化，运行更加高效

Vue2的数据响应式原理使用的是Object.defineProperty()，但它存在一定的局限性，所以才有了一些类似$set()和$delete()之类的方法。

而Vue3则不同，它使用的是new Proxy()来实现数据响应式，$set()和$delete()方法也不复存在。

2. 为何要使用Vite?

下一代前端开发与构建工具

这是Vite官网给它的定义。

不可否认，它的诞生，大大提升了模块热更新的速度，尤其是在大型项目中，相比于Webpack，Vite的优势愈加突出。或许在未来某一天，Vite真的能够完全取代Webpack。

二、如何使用？

有两种方式来安装使用它们，一种是先安装好Vite后再选择使用Vue3，另一种则是直接初始化安装Vue3。如果是一开始就决定要选择Vue作为开发框架的话，建议直接选择第二种方式比较方便。

1. 先安装Vite，后选择Vue

npm i vite -g
npm create vite@latest

然后根据引导提示一步步填写项目名称和选择相应的开发框架和语言即可:

Ok to proceed? (y) 
✔ Project name: … vue3
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

这里我项目名写的vue3，框架选择Vue，语言选择JavaScript。

2. 直接初始化安装Vue3

npm init vue@latest

然后同样根据引导提示选择相应选项即可：

✔ Project name: … vue3
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

此时，无论你选择的是以上哪种方式，都会在你命令行所在的当前目录下生成一个项目文件夹，这里生成的文件夹名称就是vue3。

最后，我们可以进入这个文件夹，安装依赖，启动项目即可：

cd vue3
npm install
npm run dev

项目开发完成后，可以通过命令行npm run build完成项目打包，如若需要预览打包后的页面，可以通过命令行npm run preview来实现本地服务器预览。

---

结束语

初次上手体验Vue3+Vite，还未在正式项目中使用，如文中有不当之处，欢迎指正，谢谢！