2、Vue 3 Pinia 使用实录：Vue 3 中 Pinia 的安装与挂载

嗨，我是温新

1、安装 Vue 3 项目

除了 TypeScript 选择 是，其他的全都选择 否。

$ pnpm create vue@latest vue3-pinia
.../share/pnpm/store/v3/tmp/dlx-32143    |   +1 +
.../share/pnpm/store/v3/tmp/dlx-32143    | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Vue.js - The Progressive JavaScript Framework

✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /home/web/vue/2024/vue3-pinia...

项目初始化完成，可执行以下命令：

  cd vue3-pinia
  pnpm install
  pnpm dev

2、安装 Pinia

$ cd vue3-pinia
# 安装 Pinia
$ pnpm i pinia

3、挂载 Pinia

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

// 1、导入 Pinia
import { createPinia } from 'pinia'
// 2、创建 Pinia 实例
const pinia = createPinia()

const app = createApp(App)
// 3、挂载 Pinia
app.use(pinia)
app.mount('#app')

到这里，Pinia 安装完成，使用 pnpm dev 启动服务就可以了。

4、修改组件

src/App.vue

<template>
  <h3>Vue 3 Pinia 使用实录</h3>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

5、启动服务

$ pnpm dev

浏览器访问 http://localhost:5173/ 看看效果吧。