搭建一个vue3 + ts + vite 步骤

搭建 Vue3 + TypeScript + Vite 的步骤如下：

1. 安装 Node.js

2. 安装 Vue CLI

npm install -g @vue/cli

3. 创建 Vue3 项目

vue create my-project

4. 选择手动配置，勾选 TypeScript 并确认

5. 安装 Vite

npm install -D vite

6. 将 package.json 中的 `"scripts"` 配置修改为：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

7. 将 `main.js` 改为 `main.ts`，并在其中引入 Vue：

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

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

8. 在 `tsconfig.json` 中添加以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"]
}

9. 在 `vite.config.js` 中添加以下配置：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 配置 @ 指向 src 目录
    }
  }
})

10. 运行项目

npm run dev