要想搭建一个基于 Vue 3 的项目，第一步就是要初始化项目，官方和社区提供了多种不同的方式。

1. Vue 官方推荐方式

在官方文档^[1]中推荐的方法，不仅可以配置好 Vite 和 Vue 3，还会选择是否加入 Router、Pinia、ESLint、Vitest 等常用工具。以 npm 为例，命令行如下：

npm create vue@latest

当你运行 npm create vue 时，npm 会下载（或更新）一个名为 create-vue 的包，里面只有 Vue 的模板。

2. Vite 官方模板

Vite 作为一个通用的前端构建工具，自带了一套基础的框架模板。以 npm 为例，命令行如下

npm create vite@latest

当你运行 npm create vite 时，npm 会在背后自动做两件事：

与 npm create vue 不同的是，npm create vue 里面只有 Vue 的模板，而 npm create vite 则是更通用的模版。

也可以不使用任何 create 命令，从零开始搭建，其基本步骤如下：

新建文件夹并初始化 npm init -y。
手动安装核心依赖：
1. npm i vue，这是 Vue 3 的运行时核心库。包含了响应式系统（ref/reactive）、虚拟 DOM、组件实例化、生命周期钩子等所有 Vue 的核心逻辑。
2. npm i -D vite @vitejs/plugin-vue。其中 vite 是构建工具，负责启动开发服务器、提供热更新以及打包生产代码。@vitejs/plugin-vue 是 Vite 的官方 Vue 插件。它的作用是让 Vite 认识并编译 .vue 文件，把单文件组件里的 <template>、<script> 和 <style> 拆解、转换成浏览器能识别的 JS 代码。
创建 index.html。
创建 src/main.js 和 src/App.vue。
手动编写 vite.config.js：

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

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