vue3+vite+ts

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

const app = createApp(App)

app.mount('#app')

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

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

// 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 Vue 3 with Vite and TypeScript!')

    return {
      message,
    }
  },
})
</script>

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

解释说明

1. main.ts: 这是Vue应用的入口文件。我们使用createApp函数创建一个Vue实例，并将其挂载到DOM中的#app元素上。

2. vite.config.ts: 这是Vite的配置文件。我们导入了defineConfig和@vitejs/plugin-vue插件来配置Vite，使其支持Vue单文件组件。还设置了开发服务器的端口为3000。

3. App.vue: 这是Vue的根组件。

   • <template>部分定义了HTML结构，包含一个h1标签，其内容绑定到message变量。
   • <script lang="ts">部分使用TypeScript编写逻辑。我们使用defineComponent定义组件，并使用ref创建一个响应式变量message。
   • <style scoped>部分定义了组件的样式，并且这些样式只对当前组件生效。

这个示例展示了如何使用Vue 3、Vite和TypeScript创建一个简单的Web应用。