[TOC] # Vite + Vue3 + Composition API + Pinia 1. 熟悉 Vue3 的 Composition API 語法。Vue3 支持 Composition API 方式編寫組件,這比 Vue2 的選項式 API 語法更加靈活和模塊化。 2. 掌握 Vue Router 4。Vue Router 也已發布 4.0 版本,與 Vue3 深度集成。 3. 熟悉 Pinia。Pinia 是 Vuex 5 的替代方案,也與 Vue3 深度集成。 4. 掌握 Vite。Vite 是一個``新興的前端構建工具``,能夠顯著提高開發環境下的啟動速度。Vue CLI 已集成 Vite,可以快速啟動 `Vue3 + Vite` 項目。 5. 了解 Vue Script Setup。這是在 .vue 文件中使用 Composition API 的簡寫語法。 具備以上條件,我們可以通過 Vue CLI 快速創建一個 Vue3 項目: ``` bash npm install -g @vue/cli // 安裝最新版 Vue CLI vue create my-app // 創建項目 cd my-app vue add vite // 添加 Vite 構建支持 vue add pinia // 添加 Pinia 狀態管理 ``` 這樣創建出來的項目結構主要如下: ``` ├── package.json ├── pnpm-lock.yml ├── public/index.html ├── src/ │ ├── assets/ │ ├── compsition-api/ // Composition API 相關代碼 │ ├── pinia/ // Pinia 狀態管理 │ ├── router/ // Vue Router │ ├── views/ │ ├── App.vue │ └── main.js ├── .eslintrc.js └── vite.config.js // Vite 配置 ``` 在 views 目錄下編寫視圖,在 src/composables 目錄下可以編寫 Composition API 函數組合,src/pinia 中編寫 Pinia Store。 使用 Vue Script Setup 語法,我們可以非常簡潔地編寫 Vue3 組件,如: ``` vue <template> <div /> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script> ``` 熟練使用 Vite + Vue3 + Composition API + Pinia 等技術棧,我們可以極速開發 Vue3 應用程序。如果您遇到任何疑問,歡迎提出,我很樂意提供詳細說明和指導。 # 示例 ~~~ vue <script setup> // 使用 <script setup> 語法開啟 Composition API import { ref } from 'vue' // 從 vue 導入 ref import { useCounterStore } from '@/stores/counter' // 導入 Pinia 的 counter store const count = ref(0) // 創建一個響應式的 count 數據 ref const doubleCount = computed(() => count.value * 2) // 使用 computed 派生一個雙倍的計算屬性 const counter = useCounterStore() // 獲得 counter store,用于 dispatch action watch(count, (newVal) => { // 觀察 count,當其改變時進行副作用操作 counter.commit('setCount', newVal) }) function increment() { // 定義一個 increment 方法以增加 count count.value++ } </script> <template> // 模板中使用 Composition API 定義的響應式數據和方法 <p>{{ count }}</p> <p>{{ doubleCount }}</p> <button @click="increment">Increment</button> </template> ~~~ ~~~ js // 在 src/stores/counter.js 中定義 counter store import { defineStore } from 'pinia' export const useCounterStore = defineStore({ state: () => { count: 0 }, actions: { increment() { this.count++ } }, mutations: { setCount(state, newCount) { state.count = newCount } } }) ~~~ ~~~ js // 在 src/main.js 中安裝并使用 Pinia import { createApp } from 'vue' import { createPinia } from 'pinia' const app = createApp({ /* ... */ }) const pinia = createPinia() app.use(pinia) ~~~ 在這個示例中： \- 使用‘`<script setup>`' 和 `Composition API` 定義組件邏輯 \- 從 Pinia 創建一個 `counter store` 來管理狀態 \- 在組件中使用 `ref` 和 `computed` 創建響應式數據 \- 監聽數據變化并觸發 `store mutation` 的變化 \- 定義方法來分發 `store action`? \- 在模板中使用 `Composition API` 定義的響應式數據和方法