5分钟快速搭建vue3+ts+vite+pinia项目

以下是详细讲解“5分钟快速搭建vue3+ts+vite+pinia项目”的完整攻略。

1. 创建项目

首先，我们需要先安装 Node.js 和 npm 包管理器，然后通过 npm 在命令行中执行以下命令来创建一个新的 Vue 3 TypeScript 项目：

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

其中，my-project 是你想要创建的项目名称，--template vue-ts 参数指定了使用 Vite 进行快速搭建，同时使用 Vue 3 和 TypeScript。

创建项目后，通过以下命令进入项目目录：

cd my-project

2. 安装和配置 Pinia

接下来，我们需要在项目中添加状态管理库 Pinia。使用以下命令来安装 Pinia：

npm i pinia

然后，我们需要配置 Pinia，以便在项目中使用。在 src 目录下创建一个名为 store.ts 的新文件，并添加以下内容：

import { createPinia } from 'pinia'

export const store = createPinia()

该文件将创建一个新的 Pinia 实例，可以用来定义我们的状态管理逻辑。

3. 编写示例代码

接下来，让我们来编写一些示例代码来测试我们的项目是否正常工作。在 src 目录下创建一个名为 App.vue 的新文件，并添加以下内容：

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

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '../store'

export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore()
    const count = store.state.count
    const increment = () => store.state.count++

    return {
      count,
      increment,
      message: 'Hello Vue 3 + TypeScript + Vite + Pinia!'
    }
  }
})
</script>

在上面的代码中，我们定义了一个名为 App 的组件，并使用 useStore 函数从 store.ts 中导入 store。包含了一个简单的计数器并展示了一个问候语。

最后，我们需要在 main.ts 中引入 Pinia 并创建实例：

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

createApp(App).use(store).mount('#app')

4. 运行项目

现在，我们可以运行项目并看到它的效果了！使用以下命令：

npm run dev

运行成功后，在浏览器中打开 http://localhost:3000/，你应该能够看到一个简单的计数器和问候语。

5. 示例说明

接下来，我将分别说明两个例子，展示了如何在 Pinia 中管理状态。

示例一：计数器

我们来看一个简单的计数器的例子。在 store.ts 中添加以下内容：

import { createPinia } from 'pinia'

export const store = createPinia({
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在这个例子中，我们定义了一个 count 状态，同时添加了一个 increment 的 action 来增加计数器的值。在 App.vue 中使用该计数器：

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

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '../store'

export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore()
    const count = store.state.count
    const increment = () => store.actions.increment()

    return {
      count,
      increment,
      message: 'Hello Vue 3 + TypeScript + Vite + Pinia!'
    }
  }
})
</script>

示例二：Todo list

我们来看一个更复杂的 Todo list 的例子。在 store.ts 中添加以下内容：

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

export const store = createPinia({
  state: () => ({
    todos: [] as Todo[],
    nextId: 1
  }),
  actions: {
    add(title: string) {
      this.todos.push({
        id: this.nextId++,
        title,
        completed: false
      })
    },
    remove(id: number) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    complete(id: number) {
      const todo = this.todos.find(todo => todo.id === id)
      if (todo) todo.completed = true
    }
  }
})

在这个例子中，我们定义了一个 todos 状态，同时添加了 add, remove, 和 complete actions 来新增、删除、和完成 todo 的操作。

在 App.vue 中使用该 Todo list：

<template>
  <div>
    <h1>{{ message }}</h1>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        {{ todo.title }}
        <button @click="remove(todo.id)">x</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useStore } from '../store'

interface NewTodo {
  title: string;
}

export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore()
    const state = reactive({ newTodo: '' })
    const todos = ref(store.state.todos)

    const addTodo = () => {
      store.actions.add(state.newTodo)
      state.newTodo = ''
    }

    const remove = (id: number) => {
      store.actions.remove(id)
    }

    return {
      todos,
      addTodo,
      remove,
      ...state,
      message: 'Hello Vue 3 + TypeScript + Vite + Pinia!'
    }
  }
})
</script>