使用 Vite、Vue 3、TypeScript 和 Pinia 搭建项目

在开始之前，请确保你已经安装了 Node.js 和 npm。接下来，我们将按照以下步骤搭建项目：
步骤 1：创建新项目
首先，打开终端并进入你想要创建项目的目录。然后，运行以下命令来初始化一个新的 Vite 项目：

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

这将创建一个名为 my-project 的新项目，并使用 Vue 3 和 TypeScript 作为模板。
步骤 2：安装依赖项
进入项目目录并安装必要的依赖项：

cd my-project
npm install

这将安装 Vite、Vue 3、TypeScript 和其他相关依赖项。
步骤 3：设置 Pinia
Pinia 是 Vue 3 的状态管理库。要使用 Pinia，首先需要安装它：

npm install pinia@next

然后，在 src 目录下创建一个名为 store 的文件夹，并在其中创建一个 index.ts 文件。在该文件中，我们将设置 Pinia：

import { createPinia } from 'pinia';
import { defineStore } from 'pinia';
export const useStore = defineStore('myStore', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
});

步骤 4：配置 Vite
在项目根目录下找到 vite.config.ts 文件，并对其进行以下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { createPinia } from 'pinia';
import { createVuePlugin } from 'vite-plugin-vue3';
import { createTypeScriptPlugin } from 'vite-plugin-typescript';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { createPinia } from 'pinia';
import { createVuePlugin } from 'vite-plugin-vue3';
import { createTypeScriptPlugin } from 'vite-plugin-typescript';
import { resolve } from 'path'; // 这里重复了，需要删除一行重复的代码。