vite + vue + ts

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

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

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

// src/App.vue
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

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

export default defineComponent({
  name: 'App',
  setup() {
    const message = ref('Hello Vite + Vue + TS!');
    return {
      message,
    };
  },
});
</script>

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

解释说明

1. vite.config.ts:

   • 使用 defineConfig 和 @vitejs/plugin-vue 来配置 Vite。
   • 设置了别名 @ 指向 src 文件夹，方便路径引用。

2. src/main.ts:

   • 使用 createApp 创建 Vue 应用实例，并挂载到 HTML 的 #app 元素上。

3. src/App.vue:

   • 使用 <template> 定义模板结构。
   • 使用 <script lang="ts"> 定义 TypeScript 代码，通过 defineComponent 和 ref 创建一个响应式的 message 变量。
   • 使用 <style scoped> 定义样式，scoped 属性确保样式仅应用于当前组件。