[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` 定义的响应式数据和方法