一、前言

vue3的快速更新，很多IT發(fā)展快的地區(qū)在22開始都已經(jīng)提上日程，小編所在的青島好像最近才有點(diǎn)風(fēng)波。vue3的人才在青島還是比較稀缺的哈，純屬小編自己的看法，可能小編是個(gè)井底之蛙?。?/p>

vue2+webpack的時(shí)代要過去了，主要是啟動(dòng)時(shí)間太慢了。所以還是比較推薦使用Vite進(jìn)行構(gòu)建，vue3官方也是推薦的?。∷俣瓤?，基本上是秒啟動(dòng)級(jí)別的！帶的例子還是vue3最新的組合式語(yǔ)法糖setup。

二、vite介紹和搭建

1、介紹

Vite官網(wǎng)：https://cn.vitejs.dev/

Vite 是一個(gè)輕量級(jí)的、速度極快的構(gòu)建工具，對(duì) Vue SFC 提供第一優(yōu)先級(jí)支持。作者是尤雨溪，同時(shí)也是 Vue 的作者！

Vite3 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依賴更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請(qǐng)注意升級(jí)你的 Node 版本。

2、搭建

廢話不多說咱們直接構(gòu)建：

要使用 Vite 來創(chuàng)建一個(gè) Vue 項(xiàng)目，非常簡(jiǎn)單：

npm init vue@latest

這個(gè)命令會(huì)安裝和執(zhí)行 create-vue，它是 Vue 提供的官方腳手架工具。

隨后輸入項(xiàng)目名稱即可。

隨后進(jìn)行一頓操作進(jìn)行構(gòu)建腳手架：

3、參數(shù)解釋

為了大家可以更清楚看到，在下面在寫一遍：

4、在idea中使用

安裝依賴

npm install

安裝es語(yǔ)法檢查

npm run lint

運(yùn)行項(xiàng)目

npm run dev

啟動(dòng)還是很快的！

頁(yè)面正常，搞定手工！

5、vue3語(yǔ)法糖

這可以是一個(gè)vue3文件的模板。

<script setup lang="ts">import TheWelcome from "../components/TheWelcome.vue";</script>

<template>
  <main>
    <TheWelcome />
  </main>
</template>
<style lang="less">
</style>

三、Pinia 介紹

Pinia 是 Vue 的存儲(chǔ)庫(kù)，它允許您跨組件/頁(yè)面共享狀態(tài)。如果您熟悉 Composition API，您可能會(huì)認(rèn)為您已經(jīng)可以通過一個(gè)簡(jiǎn)單的 export const state = reactive({})。這對(duì)于單頁(yè)應(yīng)用程序來說是正確的，但如果它是服務(wù)器端呈現(xiàn)的，會(huì)使您的應(yīng)用程序暴露于安全漏洞。但即使在小型單頁(yè)應(yīng)用程序中，您也可以從使用 Pinia 中獲得很多好處：

dev-tools 支持

• 跟蹤動(dòng)作、突變的時(shí)間線。
• Store 出現(xiàn)在使用它們的組件中。
• time travel 和 更容易的調(diào)試。

熱模塊更換

• 在不重新加載頁(yè)面的情況下修改您的 Store。
• 在開發(fā)時(shí)保持任何現(xiàn)有狀態(tài)。