一、前言
vue2+webpack 的時代要過去了，主要是啟動時間太慢了。是以還是比較推薦使用 Vite 進行建構，vue3官方也是推薦的！！速度快，基本上是秒殺級别的！帶的例子還是vue3最新的組合式文法糖 setup 。
二、vite介紹和搭建
1. 介紹
Vite官網
Vite 是一個輕量級的、速度極快的建構工具，對 Vue SFC 提供第一優先級支援。作者是尤雨溪，同時也是 Vue 的作者！
Vite3 需要 Node.js 版本 14.18+，16+。然而，有些模闆需要依賴更高的 Node 版本才能正常運作，當你的包管理器發出警告時，請注意更新你的 Node 版本。
2. 搭建
廢話不多說咱們直接建構：
要使用 Vite 來建立一個 Vue 項目，非常簡單：
npm init vue@latest 這個指令會安裝和執行 create-vue，它是 Vue 提供的官方腳手架工具。
随後輸入項目名稱即可
随後進行一段操作進行建構腳手架：
3. 參數解釋
為了大家可以更清楚看到，在下面再寫一遍：
| 問題 | 翻譯 | 選擇 |
| √ Project name: | 項目名稱 | vite-vue3 |
| √ Add TypeScript? | 使用ts新文法 | Yes |
| √ Add JSX Support? | 可以使用{{}}嵌入 | Yes |
| √ Add Vue Router for Single Page Application development? | 添加路由 | Yes |
| √ Add Pinia for state management? | 存儲庫 | Yes |
| √ Add Vitest for Unit Testing? | 單元測試 | No |
| √ Add Cypress for both Unit and End-to-End testing? | 單元測試 | No |
| √ Add ESLint for code quality? | es文法檢測 | Yes |
| √ Add Prettier for code formatting? | 文法樣式 | Yes |
4. 在idea中使用
安裝依賴
npm install 安裝es文法檢查
npm run lint 運作項目
npm run dev 啟動還是很快的！！
頁面正常，搞定手工！
5. vue3文法糖
這可以是一個vue3檔案的模闆
<script setup lang="ts">
import TheWelcome from "../components/TheWelcome.vue";
</script>
<template>
<main>
<TheWelcome />
</main>
</template>
<style lang="less">
</style> 三、Pinia 介紹
Pinia 是 Vue 的存儲庫，它允許您跨元件/頁面共享狀态。
如果您熟悉 Composition API，您可能會認為您已經可以通過一個簡單的 export const state = reactive({}) 。這對于單頁應用程式來說是正确的，但如果它是伺服器端呈現的，會使您的應用程式暴露于安全漏洞。 但即使在小型單頁應用程式中，您也可以使用 Pinia 中獲得很多好處：
dev-tools 支援
- 跟蹤動作、突變的時間線
- Store 出現在使用它們的元件中
- time travel 和 更容易地調試
熱子產品更換
- 在不重新加載頁面的情況下修改您的 Store
- 在開發時保持任何現有狀态
插件：使用插件擴充 Pinia 功能
為 JS 使用者提供适當的 TypeScript 支援或 autocompletion
伺服器端渲染支援
Pinia ：是新版的 vuex ，簡化了 vuex ，效率更快，上手更快，推薦推薦大家在 vue3 使用，當然他也支援 vue2 。
pinia的圖示還是比較可愛的！！
pinia官網
四、總結
這樣就搭建成功了，其實很簡單，主要是借此聊聊Vue3+ts+pinia，新東西還是要多接觸，雖然咱是後端，技多不壓身嘛！！
有緣人才可以看得到的哦！！！