vue3+ts+vite

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

// src/App.vue
<template>
  <div id="app">
    <h1>Hello Vue 3 with TypeScript and Vite!</h1>
  </div>
</template>

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

export default defineComponent({
  name: 'App',
})
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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

export default defineConfig({
  plugins: [vue()],
})

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "ESNext",
      "DOM"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

解释说明

1. main.ts:

   • 使用 createApp 函数创建 Vue 应用实例，并将其挂载到 DOM 元素上。

2. App.vue:

   • 这是一个单文件组件（SFC），包含模板、脚本和样式。
   • 使用 defineComponent 来定义组件，确保类型安全。

3. vite.config.ts:

   • 配置 Vite 构建工具，使用 @vitejs/plugin-vue 插件来支持 Vue 单文件组件。

4. tsconfig.json:

   • 配置 TypeScript 编译选项，确保项目中的 TypeScript 文件能够正确编译。
   • 设置了路径别名 @ 指向 src 目录，简化导入路径。