如何创建vue3 + ts + vite + mock的项目

要创建一个Vue3 + TypeScript + Vite + Mock的项目，你可以按照以下步骤进行操作：

安装Node.js：确保你的计算机上已经安装了Node.js，你可以从官方网站（https://nodejs.org/）下载并安装最新版本的Node.js。
创建新项目目录：打开终端或命令提示符，进入你想要创建项目的目录，并执行以下命令来创建一个新的项目目录：

mkdir my-project
cd my-project

初始化项目：在项目目录中执行以下命令来初始化一个新的npm项目：

npm init -y

该命令将创建一个默认的package.json文件。

安装依赖：在项目目录中执行以下命令来安装所需的依赖项：

npm install --save-dev vite @vitejs/plugin-vue vue@next typescript

这将安装Vite、Vue3和TypeScript。

创建Vite配置文件：在项目根目录中创建一个名为vite.config.ts的文件，并添加以下内容：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

这里配置了Vite插件和代理设置，用于模拟API请求。

创建Vue组件：在项目根目录中创建一个名为src的文件夹，并在其中创建一个名为App.vue的文件，并添加以下内容：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello, Vue3 + TypeScript + Vite + Mock!')
</script>

这是一个简单的Vue组件，显示一个消息。

创建主入口文件：在src目录中创建一个名为main.ts的文件，并添加以下内容：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这是Vue应用程序的主入口文件。

创建Mock数据：在项目根目录中创建一个名为mock的文件夹，并在其中创建一个名为api.ts的文件，并添加以下内容：

import { rest } from 'msw'
import { setupServer } from 'msw/node'

const server = setupServer(
  rest.get('/api/message', (req, res, ctx) => {
    return res(
      ctx.json({
        message: 'Mocked message'
      })
    )
  })
)

server.listen()

这是一个使用Mock Service Worker（MSW）创建的模拟API的示例。

配置TypeScript：在项目根目录中创建一个名为tsconfig.json的文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictPropertyInitialization": false
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

这是一个TypeScript的配置文件，用于配置编译选项。

启动开发服务器：在项目根目录中执行以下命令来启动Vite的开发服务器：

npm run dev

这将编译和启动你的Vue应用程序，并在浏览器中打开。

现在，你已经成功创建了一个Vue3 + TypeScript + Vite + Mock的项目。你可以继续开发你的应用程序，添加更多的组件和功能