Vue3 项目构建指南：使用 Vite、TypeScript、Mock、Axios 和 Ant Design Vue

要创建一个 Vue3 + TypeScript + Vite + Mock + Axios + Ant Design Vue 的项目，可以按照以下步骤进行操作：\n\n1. 安装 Node.js：确保你的电脑上已经安装了 Node.js。你可以在官网（https://nodejs.org/）下载并安装最新版本的 Node.js。\n\n2. 创建项目：打开终端或命令行界面，进入到你想要创建项目的目录下，执行以下命令来创建一个新的 Vue 项目：\n\nbash\nnpm init vite@latest my-project --template vue-ts\n\n\n这将使用 Vite 模板来创建一个 Vue3 + TypeScript 的项目。\n\n3. 进入项目目录：进入到项目目录中，执行以下命令：\n\nbash\ncd my-project\n\n\n4. 安装依赖：执行以下命令来安装项目所需的依赖：\n\nbash\nnpm install\n\n\n5. 安装 Mock.js：执行以下命令来安装 Mock.js：\n\nbash\nnpm install mockjs --save-dev\n\n\n6. 安装 Axios：执行以下命令来安装 Axios：\n\nbash\nnpm install axios\n\n\n7. 安装 Ant Design Vue：执行以下命令来安装 Ant Design Vue：\n\nbash\nnpm install ant-design-vue@next\n\n\n8. 配置 Mock 数据：在项目根目录下创建一个 mock 文件夹，并在其中创建一个 index.ts 文件，用于配置 Mock 数据。你可以根据需要使用 Mock.js 来模拟接口数据。\n\ntypescript\nimport { createApp } from 'vue';\nimport { MockMethod, MockRequest } from 'mockjs';\n\nconst app = createApp({});\n\napp.config.globalProperties.$mock = (url: string, method: MockMethod, response: MockRequest) => {\n // Mock.js 相关配置\n};\n\napp.mount('#app');\n\n\n9. 配置 Axios：在项目根目录下创建一个 src 文件夹，在其中创建一个 api.ts 文件，用于配置 Axios。\n\ntypescript\nimport axios from 'axios';\n\nconst instance = axios.create({\n baseURL: 'http://api.example.com', // 根据实际接口地址配置\n timeout: 10000, // 请求超时时间\n});\n\nexport default instance;\n\n\n10. 配置 Ant Design Vue：在项目根目录下创建一个 src 文件夹，在其中创建一个 main.ts 文件，用于配置 Ant Design Vue。\n\ntypescript\nimport { createApp } from 'vue';\nimport Antd from 'ant-design-vue';\nimport 'ant-design-vue/dist/antd.css';\n\nimport App from './App.vue';\n\nconst app = createApp(App);\n\napp.use(Antd);\napp.mount('#app');\n\n\n11. 创建页面组件：在 src 文件夹下创建 views 文件夹，并在其中创建你的页面组件。\n\n12. 修改路由：在 src 文件夹下创建 router 文件夹，并在其中创建 index.ts 文件，用于配置路由。\n\ntypescript\nimport { createRouter, createWebHistory } from 'vue-router';\nimport Home from '../views/Home.vue';\n\nconst routes = [\n {\n path: '/',\n name: 'Home',\n component: Home,\n },\n // 其他路由配置\n];\n\nconst router = createRouter({\n history: createWebHistory(),\n routes,\n});\n\nexport default router;\n\n\n13. 修改 App 组件：在 src 文件夹下的 App.vue 文件中，修改模板和样式，以及添加路由视图的占位符。\n\nhtml\n<template>\n <div id="app">\n <router-view />\n </div>\n</template>\n\n<style>\n/* 添加自定义样式 */\n</style>\n\n\n14. 运行项目：执行以下命令来运行项目：\n\nbash\nnpm run dev\n\n\n这将启动开发服务器，并在浏览器中打开项目。\n\n以上就是创建 Vue3 + TypeScript + Vite + Mock + Axios + Ant Design Vue 项目的步骤。你可以根据实际需要进行配置和调整。