一、為何要使用叠赐？
1. 為何要使用Vue3?
你說Vue2用的好好的欲账，為啥要用Vue3呢屡江？就因為它是最新版？不赛不，還不是因為Vue3它是真的香嘛惩嘉！
① 組合式API，編碼更加自由
Vue3在Vue2的選項式API基礎(chǔ)上新增了組合式API踢故，組合式API不再像選項式API那樣拘泥于固定的對象結(jié)構(gòu)文黎，而是使用函數(shù)式編程，更加自由殿较，耦合度更低耸峭。例如：
<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寫法統(tǒng)一，減少記憶負(fù)擔(dān)
例如淋纲，Vue2中的$mount()在Vue3中變成了mount()抓艳；刪除事件修飾符.sync，統(tǒng)一用v-model替代帚戳，等等。
③ 數(shù)據(jù)響應(yīng)式優(yōu)化儡首，運行更加高效
Vue2的數(shù)據(jù)響應(yīng)式原理使用的是Object.defineProperty()片任，但它存在一定的局限性，所以才有了一些類似$set()和$delete()之類的方法蔬胯。
而Vue3則不同对供，它使用的是new Proxy()來實現(xiàn)數(shù)據(jù)響應(yīng)式，$set()和$delete()方法也不復(fù)存在氛濒。
2. 為何要使用Vite?
下一代前端開發(fā)與構(gòu)建工具
這是Vite官網(wǎng)給它的定義产场。
不可否認(rèn)，它的誕生舞竿，大大提升了模塊熱更新的速度京景，尤其是在大型項目中，相比于Webpack骗奖，Vite的優(yōu)勢愈加突出确徙。或許在未來某一天执桌，Vite真的能夠完全取代Webpack鄙皇。
二、如何使用仰挣？
有兩種方式來安裝使用它們伴逸，一種是先安裝好Vite后再選擇使用Vue3，另一種則是直接初始化安裝Vue3膘壶。如果是一開始就決定要選擇Vue作為開發(fā)框架的話错蝴，建議直接選擇第二種方式比較方便洲愤。
1. 先安裝Vite，后選擇Vue
npm i vite -g
npm create vite@latest
然后根據(jù)引導(dǎo)提示一步步填寫項目名稱和選擇相應(yīng)的開發(fā)框架和語言即可:
Ok to proceed? (y)
? Project name: … vue3
? Select a framework: ? Vue
? Select a variant: ? JavaScript
這里我項目名寫的vue3漱竖，框架選擇Vue禽篱，語言選擇JavaScript。
2. 直接初始化安裝Vue3
npm init vue@latest
然后同樣根據(jù)引導(dǎo)提示選擇相應(yīng)選項即可：
? 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
此時馍惹，無論你選擇的是以上哪種方式躺率，都會在你命令行所在的當(dāng)前目錄下生成一個項目文件夾，這里生成的文件夾名稱就是vue3万矾。
最后悼吱，我們可以進(jìn)入這個文件夾，安裝依賴良狈，啟動項目即可：
cd vue3
npm install
npm run dev
項目開發(fā)完成后后添，可以通過命令行npm run build完成項目打包，如若需要預(yù)覽打包后的頁面薪丁，可以通過命令行npm run preview來實現(xiàn)本地服務(wù)器預(yù)覽遇西。
結(jié)束語
初次上手體驗Vue3+Vite，還未在正式項目中使用严嗜，如文中有不當(dāng)之處粱檀，歡迎指正，謝謝漫玄！
