创建第一个 Vue 应用

在上一节中你已经成功搭建了 Vue 的开发环境。这一节将带你从零开始，创建并运行你的第一个 Vue 应用。你会了解 Vue 项目的基本结构，掌握组件的创建与使用，并通过一个简单的页面体验 Vue 的开发流程。

初始化项目

在终端中运行以下命令来创建一个新项目（如果你还没创建过的话）：

npm create vue@latest

你也可以使用 pnpm 或 yarn：

pnpm create vue@latest

执行上述命令，会进入一个交互界面，提示你输入项目名称，并选择相应的配置项，例如是否启用 TypeScript、Vue Router、Pinia 等。新手建议保留默认选项，便于快速上手。

这里我们创建一个名为 my-first-app 的项目，并勾选 TypeScript：

$ npm create vue@latest
Need to install the following packages:
create-vue@3.16.4
Ok to proceed? (y) y


> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  请输入项目名称：
│  my-first-app
│
◆  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  ◼ TypeScript
│  ◻ JSX 支持
│  ◻ Router（单页面应用