初识 Vue 3：开启前端新世界

Aphros 收录于网页开发和前端

2026-07-22 2026-07-24 约 1100 字预计阅读 3 分钟 - 次阅读 - 条评论

第 1 节概述

Vue 是一个渐进式的前端框架。

所谓渐进式，就是说你可以按需使用它。它不要求你一次性用上所有功能：

可以在现有页面中嵌入一个 Vue 组件
也可以用它构建完整的单页应用
甚至可以做服务端渲染、桌面端、移动端

简单来说，Vue 可以从小用到大。

第 2 节创建项目

Vue 官方提供了一个脚手架工具，可以快速生成项目。

1
npm create vue@latest

运行后，命令行会引导你选择需要的功能：

选项	说明
TypeScript	添加类型支持，推荐启用
JSX 支持	在 Vue 中使用 JSX 语法
Router	页面路由（单页应用必备）
Pinia	状态管理（跨组件共享数据）
Vitest	单元测试
端到端测试	浏览器自动化测试
ESLint	代码规范检查
Prettier	代码格式化

初次学习建议勾选 TypeScript、Router 和 Pinia，其余可以后续添加。

第 3 节项目结构

创建完成后，项目的核心文件如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
project-name/
├── index.html              # 页面入口
├── vite.config.ts          # 构建配置
├── tsconfig.json           # TypeScript 配置
├── src/
│   ├── main.ts             # Vue 应用入口
│   ├── App.vue             # 根组件
│   ├── components/         # 通用组件
│   ├── pages/              # 页面组件
│   ├── router/             # 路由配置
│   ├── stores/             # 状态管理
│   └── types/              # 类型定义

3.1 加载链路

打开 index.html，它是整个应用的起点：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

说明

index.html 中有一个 id 为 app 的 div，和一个引用 main.ts 的 script 标签。浏览器加载页面后，会执行 main.ts。

main.ts 是真正的应用入口：

1
2
3
4
5
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 上。

3.2 单文件组件

Vue 3 使用 .vue 文件来定义一个组件。一个组件由三部分组成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <!-- HTML 模板，写页面结构 -->
</template>

<script setup lang="ts">
// TypeScript 逻辑，定义数据和事件
</script>

<style scoped>
/* CSS 样式，只影响当前组件 */
</style>

区块	作用	语言
`<template>`	定义页面结构和内容	HTML
`<script setup>`	定义数据和交互逻辑	TypeScript / JavaScript
`<style scoped>`	定义样式，只作用于当前组件	CSS

scoped 关键字让样式只在这个组件内生效，不会污染其他组件。

3.3 目录规范

按照约定，不同类型的文件放在不同的目录下：

目录	用途	文件类型
`src/components/`	通用小组件，如按钮、输入框	`.vue`
`src/pages/`	页面级组件，对应一个 URL	`.vue`
`src/router/`	路由配置，定义 URL 与页面的对应关系	`.ts`
`src/stores/`	状态管理（Pinia），共享数据	`.ts`
`src/types/`	TypeScript 类型定义	`.ts`

第 4 节 TypeScript 配置

在 src/types/ 下创建类型定义文件，比如 user.ts：

1
2
3
4
5
6
7
export type Gender = '男' | '女'

export interface User {
  id: number
  name: string
  gender: Gender
}

在组件中使用：

1
2
3
4
5
6
7
8
9
<script setup lang="ts">
import type { User } from '@/types/user'

const person: User = {
  id: 1,
  name: '张三',
  gender: '男',
}
</script>

这里的 @ 符号表示 src 目录。它由脚手架自动配置在 vite.config.ts 中。

项目框架搭好了。现在你有了一个 Vue 应用，但页面是静态的。

下一步要解决的问题是：数据变了，页面怎么自动更新？

初识 Vue 3：开启前端新世界

第 1 节 概述

第 2 节 创建项目

第 3 节 项目结构

3.1 加载链路

3.2 单文件组件

3.3 目录规范

第 4 节 TypeScript 配置

第 1 节概述

第 2 节创建项目

第 3 节项目结构