# 初识 Vue 3：开启前端新世界 ## 概述 Vue 是一个**渐进式**的前端框架。 所谓渐进式，就是说你可以按需使用它。它不要求你一次性用上所有功能： - 可以在现有页面中嵌入一个 Vue 组件 - 也可以用它构建完整的单页应用 - 甚至可以做服务端渲染、桌面端、移动端 简单来说，Vue 可以从小用到大。 ## 创建项目 Vue 官方提供了一个脚手架工具，可以快速生成项目。 ```shell npm create vue@latest ``` 运行后，命令行会引导你选择需要的功能： | 选项 | 说明 | |------|------| | TypeScript | 添加类型支持，推荐启用 | | JSX 支持 | 在 Vue 中使用 JSX 语法 | | Router | 页面路由（单页应用必备） | | Pinia | 状态管理（跨组件共享数据） | | Vitest | 单元测试 | | 端到端测试 | 浏览器自动化测试 | | ESLint | 代码规范检查 | | Prettier | 代码格式化 | 初次学习建议勾选 TypeScript、Router 和 Pinia，其余可以后续添加。 ## 项目结构 创建完成后，项目的核心文件如下： ``` project-name/ ├── index.html # 页面入口 ├── vite.config.ts # 构建配置 ├── tsconfig.json # TypeScript 配置 ├── src/ │ ├── main.ts # Vue 应用入口 │ ├── App.vue # 根组件 │ ├── components/ # 通用组件 │ ├── pages/ # 页面组件 │ ├── router/ # 路由配置 │ ├── stores/ # 状态管理 │ └── types/ # 类型定义 ``` ### 加载链路 打开 `index.html`，它是整个应用的起点： ```html Vite App
``` > [!info] 说明 > `index.html` 中有一个 `id` 为 `app` 的 `div`，和一个引用 `main.ts` 的 `script` 标签。浏览器加载页面后，会执行 `main.ts`。 `main.ts` 是真正的应用入口： ```typescript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` `createApp` 接收 `App.vue` 组件，创建一个 Vue 应用实例。`.mount('#app')` 将这个实例挂载到 `index.html` 中的 `div` 上。 ### 单文件组件 Vue 3 使用 `.vue` 文件来定义一个组件。一个组件由三部分组成： ```vue ``` | 区块 | 作用 | 语言 | |------|------|------| | `