一、前言

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

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

二、vite介紹和搭建

1、介紹

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

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

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

2、搭建

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

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

npm init vue@latest

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

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

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

3、參數(shù)解釋

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

4、在idea中使用

安裝依賴

npm install

安裝es語法檢查

npm run lint

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

npm run dev

啟動還是很快的！

頁面正常，搞定手工！

5、vue3語法糖

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

dev-tools 支持

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

熱模塊更換

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