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

{"title":"如何创建vue3 + ts + vite + mock + axios + antd vue项目","content":"要创建一个Vue3 + TypeScript + Vite + Mock + Axios + Ant Design Vue的项目，你可以按照以下步骤进行操作：\n\n1. 首先，确保你的环境中已经安装了Node.js和npm。\n\n2. 打开终端，进入你要创建项目的目录。\n\n3. 使用Vite来创建一个新的项目。在终端中执行以下命令：\n\n\nnpm init @vitejs/app my-vue-app --template vue-ts\n\n\n这将创建一个名为my-vue-app的项目，并且使用Vue3和TypeScript作为模板。\n\n4. 进入你的项目目录：\n\n\ncd my-vue-app\n\n\n5. 安装依赖：\n\n\nnpm install\n\n\n6. 安装Mock.js和axios：\n\n\nnpm install mockjs axios --save-dev\n\n\n7. 在你的项目根目录下创建一个mock文件夹，并在其中创建一个index.ts文件。在index.ts文件中编写你的Mock数据。\n\n8. 修改src/main.ts文件，引入并使用Mock.js：\n\ntypescript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\nimport axios from 'axios';\nimport MockAdapter from 'axios-mock-adapter';\nimport { mockData } from '../mock';\n\nconst mock = new MockAdapter(axios);\nmockData(mock);\n\ncreateApp(App).use(router).mount('#app');\n\n\n9. 安装Ant Design Vue：\n\n\nnpm install ant-design-vue@next --save\n\n\n10. 在src/main.ts文件中引入并使用Ant Design Vue：\n\ntypescript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\nimport Antd from 'ant-design-vue';\nimport 'ant-design-vue/dist/antd.css';\n\ncreateApp(App).use(router).use(Antd).mount('#app');\n\n\n11. 修改src/App.vue文件，使用Ant Design Vue的组件进行布局和展示。\n\n12. 运行项目：\n\n\nnpm run dev\n\n\n这将在开发模式下启动项目，你可以在浏览器中访问http://localhost:3000来查看项目。\n\n以上就是创建Vue3 + TypeScript + Vite + Mock + Axios + Ant Design Vue项目的步骤。你可以根据自己的需求进行进一步的开发和定制。"}