要用 Vite 快速创建一个 Vue 3 项目，步骤非常简单，官方推荐用法如下：

用 Vite 创建 Vue 3 项目详细步骤

1. 安装 Node.js

确保你已经安装了 Node.js，建议用最新版的 LTS 版本。可以在命令行输入：

node -v
npm -v

确认版本存在。

2. 创建项目

打开终端，运行：

npm create vite@latest

它会提示你：

  • 输入项目名称（比如 my-vue3-app）
  • 选择框架（选择 vue）
  • 选择变体（选择 vue 或者 vue-ts，即 JavaScript 还是 TypeScript）

示例交互：

✔ Project name: … my-vue3-app
✔ Select a framework: › vue
✔ Select a variant: › vue

3. 进入项目目录并安装依赖

cd my-vue3-app
npm install

4. 启动开发服务器

npm run dev

这时，终端会显示本地访问地址，默认是 http://localhost:5173 ，打开浏览器访问即可看到 Vue 3 项目默认页面。

5. 项目结构说明（简要）

  • src/：源码目录
  • src/main.js：入口文件，创建 Vue 应用实例
  • index.html：项目入口 HTML，Vite 会自动处理
  • package.json：项目配置和依赖管理

总结脚本

直接复制以下命令快速创建 Vue3 项目（假设你用 JavaScript 版本）：

npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev

好嘞，给你写一个最基础的 Vue 3 + Vite 项目里的组件示例，还有简单讲下项目关键文件。

1. 入口文件 src/main.js

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

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

这段代码创建了 Vue 应用并挂载到 index.html 里的 #app 容器。

2. 根组件 src/App.vue

<template>
  <div>
    <h1>Hello Vue 3 + Vite!</h1>
    <Counter />
  </div>
</template>

<script setup>
import Counter from './components/Counter.vue'
</script>

<style>
h1 {
  color: #42b983;
}
</style>

这里引入了一个叫 Counter 的子组件。

3. 子组件 src/components/Counter.vue

<template>
  <div>
    <p>Count is: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<style scoped>
button {
  background-color: #42b983;
  border: none;
  color: white;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
</style>

4. index.html 中有个挂载点

<div id="app"></div>

说明

  • script setup 是 Vue 3 推荐的 <script> 新写法，写起来更简洁。
  • ref 用来声明响应式变量，点击按钮能动态更新计数。
  • 组件样式用 <style scoped> 限制只影响当前组件。

这样就能跑起来一个非常简单的 Vue3 + Vite 项目，点击按钮能看到计数器变化。