vue+vite

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

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

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

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

// App.vue
<template>
  <div id="app">
    <h1>Hello Vite + Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 20px;
}
</style>

解释说明：

1. main.js:

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

2. vite.config.js:

   • 使用 Vite 的配置文件来定义构建工具的行为。这里我们引入了 @vitejs/plugin-vue 插件，以便 Vite 可以处理 .vue 文件。

3. App.vue:

   • 这是一个简单的 Vue 组件，包含模板、脚本和样式部分。
   • 模板部分定义了一个简单的 HTML 结构，显示 "Hello Vite + Vue!"。
   • 脚本部分导出组件的基本配置。
   • 样式部分为应用添加了一些基本的样式。

通过这些文件，你可以快速启动一个基于 Vue 和 Vite 的开发环境。