如何创建vue3 + ts + vite + mock + axios + antd vue + pnpm的项目

要创建一个使用Vue3 + TypeScript + Vite + Mock + Axios + Ant Design Vue + PNPM的项目，可以按照以下步骤进行操作：

1. 确保你已经安装了最新版本的Node.js和NPM。你也可以选择使用PNPM作为包管理工具，可以通过npm install -g pnpm来安装。

2. 打开命令行工具，创建一个新的项目文件夹，并进入该文件夹：

mkdir my-project
cd my-project

3. 初始化一个新的Vue3项目，可以使用Vite来快速创建项目：

pnpm init vite@latest

在初始化过程中，你需要选择一些选项，包括项目名称、模板类型、是否使用TypeScript等。你可以选择Vue 3和TypeScript模板。

4. 进入项目文件夹，并安装依赖：

cd my-project
pnpm install

5. 添加Mock功能，可以使用vite-plugin-mock来模拟接口请求。在项目根目录下创建一个mock文件夹，并在其中创建一个index.ts文件，用于编写模拟接口的代码。

安装vite-plugin-mock：

pnpm add -D vite-plugin-mock

在项目的vite.config.ts文件中，添加vite-plugin-mock插件的配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createMockServer } from 'vite-plugin-mock';

export default defineConfig({
  plugins: [
    vue(),
    createMockServer({
      // 指定mock文件夹的路径
      mockPath: 'mock',
    }),
  ],
});

6. 集成Axios，可以使用Axios来进行接口请求。首先安装Axios：

pnpm add axios

在项目的src文件夹中，创建一个api文件夹，并在其中创建一个index.ts文件，用于编写接口请求的代码。可以参考Axios的文档来编写接口请求的代码。

7. 集成Ant Design Vue，可以使用Ant Design Vue来快速构建UI界面。首先安装Ant Design Vue：

pnpm add ant-design-vue@next

在项目的main.ts文件中，引入并使用Ant Design Vue的组件和样式：

import { createApp } from 'vue';
import { Button } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

import App from './App.vue';

const app = createApp(App);

app.use(Button);

app.mount('#app');

8. 配置TypeScript支持，Vite已经内置对TypeScript的支持，你可以直接在项目中使用TypeScript。你可以在项目的根目录下创建一个tsconfig.json文件来配置TypeScript的编译选项。

9. 启动项目，可以使用以下命令启动项目：

pnpm dev

这样，你就成功创建了一个Vue3 + TypeScript + Vite + Mock + Axios + Ant Design Vue + PNPM的项目。可以根据自己的需求来定制和扩展项目