Vue3 + TypeScript + Vite + Mock 项目创建指南

"要创建一个 Vue3 + TypeScript + Vite + Mock 的项目，你可以按照以下步骤进行操作：\n\n1. 安装 Node.js：确保你的计算机上已经安装了 Node.js，你可以从官方网站（https://nodejs.org/）下载并安装最新版本的 Node.js。\n\n2. 创建新项目目录：打开终端或命令提示符，进入你想要创建项目的目录，并执行以下命令来创建一个新的项目目录：\n\nbash\\nmkdir my-project\\ncd my-project\\n\n\n3. 初始化项目：在项目目录中执行以下命令来初始化一个新的 npm 项目：\n\nbash\\nnpm init -y\\n\n\n该命令将创建一个默认的package.json文件。\n\n4. 安装依赖：在项目目录中执行以下命令来安装所需的依赖项：\n\nbash\\nnpm install --save-dev vite @vitejs/plugin-vue vue@next typescript\\n\n\n这将安装 Vite、Vue3 和 TypeScript。\n\n5. 创建 Vite 配置文件：在项目根目录中创建一个名为vite.config.ts的文件，并添加以下内容：\n\ntypescript\\nimport { defineConfig } from 'vite'\\nimport vue from '@vitejs/plugin-vue'\\n\\nexport default defineConfig({\\n plugins: [vue()],\\n server: {\\n proxy: {\\n '/api': {\\n target: 'http://localhost:3000',\\n changeOrigin: true,\\n rewrite: (path) => path.replace(/^/api/, '')\\n }\\n }\\n }\\n})\\n\n\n这里配置了 Vite 插件和代理设置，用于模拟 API 请求。\n\n6. 创建 Vue 组件：在项目根目录中创建一个名为src的文件夹，并在其中创建一个名为App.vue的文件，并添加以下内容：\n\nvue\\n<template>\\n <div>\\n <h1>{{ message }}</h1>\\n </div>\\n</template>\\n\\n<script setup lang="ts">\\nimport { ref } from 'vue'\\n\\nconst message = ref('Hello, Vue3 + TypeScript + Vite + Mock!')\\n</script>\\n\n\n这是一个简单的 Vue 组件，显示一个消息。\n\n7. 创建主入口文件：在src目录中创建一个名为main.ts的文件，并添加以下内容：\n\ntypescript\\nimport { createApp } from 'vue'\\nimport App from './App.vue'\\n\\ncreateApp(App).mount('#app')\\n\n\n这是 Vue 应用程序的主入口文件。\n\n8. 创建 Mock 数据：在项目根目录中创建一个名为mock的文件夹，并在其中创建一个名为api.ts的文件，并添加以下内容：\n\ntypescript\\nimport { rest } from 'msw'\\nimport { setupServer } from 'msw/node'\\n\\nconst server = setupServer(\\n rest.get('/api/message', (req, res, ctx) => {\\n return res(\\n ctx.json({\\n message: 'Mocked message'\\n })\\n )\\n })\\n)\\n\\nserver.listen()\\n\n\n这是一个使用 Mock Service Worker（MSW）创建的模拟 API 的示例。\n\n9. 配置 TypeScript：在项目根目录中创建一个名为tsconfig.json的文件，并添加以下内容：\n\njson\\n{\\n "compilerOptions": {\\n "target": "esnext",\\n "module": "esnext",\\n "moduleResolution": "node",\\n "strict": true,\\n "jsx": "preserve",\\n "importHelpers": true,\\n "moduleResolution": "node",\\n "noImplicitAny": false,\\n "noImplicitReturns": true,\\n "noImplicitThis": true,\\n "noUnusedLocals": true,\\n "noUnusedParameters": true,\\n "esModuleInterop": true,\\n "allowSyntheticDefaultImports": true,\\n "resolveJsonModule": true,\\n "isolatedModules": true,\\n "experimentalDecorators": true,\\n "emitDecoratorMetadata": true,\\n "strictPropertyInitialization": false\\n },\\n "include": [\\n "src/**/*.ts",\\n "src/**/*.tsx",\\n "src/**/*.vue",\\n "tests/**/*.ts",\\n "tests/**/*.tsx"\\n ],\\n "exclude": ["node_modules"]\\n}\\n\n\n这是一个 TypeScript 的配置文件，用于配置编译选项。\n\n10. 启动开发服务器：在项目根目录中执行以下命令来启动 Vite 的开发服务器：\n\nbash\\nnpm run dev\\n\n\n这将编译和启动你的 Vue 应用程序，并在浏览器中打开。\n\n现在，你已经成功创建了一个 Vue3 + TypeScript + Vite + Mock 的项目。你可以继续开发你的应用程序，添加更多的组件和功能。\n