vite4 vue3 pinia

以下是使用Vite4和Vue3创建项目并使用Pinia的示例：

1. 首先，确保你已经安装了Node.js和npm。

2. 使用以下命令安装Vite：

npm init vite@latest my-vue-project --template vue

这将创建一个名为my-vue-project的文件夹，并在其中初始化一个基本的Vue项目。

3. 进入项目文件夹：

cd my-vue-project

4. 安装Pinia：

npm install pinia

5. 在src文件夹中创建一个store文件夹，并在其中创建一个名为index.ts的文件。

6. 在index.ts文件中，编写你的Pinia store：

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

7. 在main.ts文件中，导入并使用Pinia：

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

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

8. 在App.vue文件中，使用Pinia store：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useMyStore } from './store'

export default {
  setup() {
    const store = useMyStore()

    return {
      count: store.count,
      increment: store.increment
    }
  }
}
</script>

9. 运行项目：

npm run dev

现在，你可以在浏览器中访问http://localhost:3000，看到一个计数器，并且点击按钮会增加计数器的值。