《Vue3 到底是什么？从第一个项目开始认识 createApp、单文件组件与项目结构》

一、写在前面

学 Vue3 的时候，很多新手都会经历一个很典型的阶段：

刚创建完项目，打开目录，看到一堆文件：

• main.ts

• App.vue

• components

• assets

• public

• vite.config.ts

然后整个人开始发懵。

尤其是第一次看到这段代码时：

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

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

很多人的第一反应是：

• createApp 是什么？

• App.vue 为什么能直接导入？

• .vue 文件到底是什么文件？

• mount('#app') 又是什么意思？

• 为什么写完这些，页面就能显示出来？

这些问题如果一开始不讲清楚，后面你学模板语法、组件、路由时会一直有一种“能照着写，但不知道底层在干嘛”的感觉。

所以这一篇文章，我不急着讲很多复杂语法，而是先把 Vue3 项目启动的最小逻辑链条 讲清楚。

你只要把这篇搞明白，后面很多知识点都会顺很多。

二、Vue3 到底是什么？

先别急着背概念，我们先说一句最容易理解的话：

Vue3 是一个用于构建用户界面的前端框架。

这句话初看很普通，但里面有两个关键词非常重要：

1. 用户界面

用户界面，说白了就是你在网页上看到、能点击、能输入、能交互的那部分内容。比如：

• 按钮

• 输入框

• 列表

• 卡片

• 表单

• 导航栏

• 页面内容区域

Vue3 的目标，就是帮助你更高效地组织和更新这些界面。

2. 框架

框架的意思不是“帮你把页面自动做完”，而是：

提供一套组织页面、管理数据、处理交互的规则和工具。

也就是说，Vue3 不是一个现成网页模板，也不是拖拽式页面生成器。
它更像是一套“写前端项目的方法论 + 工具集合”。

在原生开发里，你可能需要自己手动操作 DOM；
而在 Vue3 里，更强调的是：

• 先定义数据

• 再定义页面结构

• 页面随着数据自动更新

这就是 Vue 的核心思想之一：数据驱动视图。

三、为什么很多人觉得 Vue3 抽象？

因为新手第一次接触 Vue3 时，会从“直接写 HTML 页面”突然切换到“组件 + 数据 + 指令 + 工程化”的模式。

比如以前你可能这样写一个按钮：

<button onclick="alert('你好')">点我</button>

但在 Vue3 里，你更可能这样写：

<template>
<button @click="sayHello">点我</button>
</template>

<script setup>
const sayHello = () => {
alert('你好')
}
</script>

你会发现，Vue3 不再只是“往 HTML 里塞 JS”，而是在建立一套更清晰的组织方式：

• 结构写在模板里

• 逻辑写在脚本里

• 样式写在样式区

• 不同页面和功能可以拆成组件

所以你觉得它抽象，不是因为它故意复杂，而是因为它开始要求你用“工程化的方式”写页面了。

四、一个 Vue3 项目最核心的启动代码是什么？

大多数 Vue3 项目一开始都会看到类似这样的代码：

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

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

这 3 行代码非常重要。
你可以把它理解成：Vue 项目的启动入口。

接下来我们一行一行拆开看。

五、import { createApp } from 'vue' 是什么意思？

这一行的意思是：

从 Vue 这个库里，导入一个叫 createApp 的方法。

也就是说，createApp 不是你自己写的，而是 Vue 官方提供给你的。

你可以把它理解成“创建一个 Vue 应用实例”的入口函数。

简单类比一下：

• 你要做一个 Vue 项目

• 总得先“创建这个项目的运行对象”

• createApp() 就是在干这件事

所以这一行是在说：

我要开始使用 Vue，并且我准备创建一个 Vue 应用了

六、import App from './App.vue' 是什么意思？

这一行的意思是：

把当前目录下的 App.vue 这个组件导入进来，并命名为 App。

这里有两个点新手特别容易懵。

1. 为什么 .vue 文件可以直接导入？

因为 Vue 项目不是浏览器直接裸跑的，它背后有构建工具。
比如现在最常见的是 Vite。

构建工具会帮你做很多事情，其中一件就是：

• 识别 .vue 文件

• 把它编译成浏览器能理解的 JavaScript 模块

所以你写的是：

import App from './App.vue'

但背后构建工具会把这个 .vue 文件处理成一个标准组件对象。

这也是为什么你在普通原生 HTML 页面里不能随便这么导入 .vue 文件，而在 Vue 项目里可以。

2. App.vue 是什么？

App.vue 通常可以理解为：

整个 Vue 应用最外层、最根部的组件。

也就是说，它往往是整个页面树的起点。

你后面写的很多其他组件，往往都会被一层层嵌套到 App.vue 里面。

所以可以先简单理解成：

• main.ts 负责启动项目

• App.vue 负责作为最外层页面入口

七、createApp(App).mount('#app') 到底在干什么？

这一行是整个启动过程的关键。

它可以拆成两部分看：

第一部分：createApp(App)

这一段表示：

以 App 这个根组件为基础，创建一个 Vue 应用。

也就是说，你可以把 App.vue 当成整个应用最开始渲染的内容。

第二部分：.mount('#app')

这一段表示：

把这个 Vue 应用挂载到页面中 id 为 app 的那个元素上。

“挂载”这个词一开始听起来有点抽象，其实你可以直接理解成：

• 找到网页里的某个容器

• 把 Vue 应用渲染进去

比如在很多项目里，index.html 里会有这样一段：

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

那 mount('#app') 的意思就是：

• 找到这个 id="app" 的元素

• 把 Vue 应用显示到这里面

所以整句：

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

本质上就是：

创建一个以 App 组件为根的 Vue 应用，并把它显示到页面里的 #app 容器中。

八、为什么页面最终能显示出来？

到这里，我们就能把整个链条连起来了。

假设项目里有这几个部分：

index.html

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

main.ts

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

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

App.vue

<template>
<h1>Hello Vue3</h1>
</template>

那么运行逻辑大概就是：

所以 Vue 项目不是“凭空显示页面”，而是完成了这样一条完整链路：

HTML 容器 → JS 启动入口 → 根组件渲染 → 页面显示

九、.vue 单文件组件到底是什么？

这是新手必须理解的一个点。

Vue 最有代表性的特征之一，就是 单文件组件，也就是 .vue 文件。

例如一个最简单的 .vue 文件可能是这样：

<template>
<h1>你好，Vue3</h1>
</template>

<script setup>
const message = '欢迎学习 Vue3'
</script>

<style scoped>
h1 {
color: skyblue;
}
</style>

这个文件虽然看起来像是“HTML + JS + CSS 混在一起”，
但它本质上是在表达一件很清晰的事情：

• template：写页面结构

• script：写逻辑

• style：写样式

所以 .vue 文件其实就是：

把一个组件的结构、逻辑、样式放在同一个文件里管理。

这就是“单文件组件”的意思。

十、为什么 Vue 要用单文件组件？

很多新手第一次看到 .vue 文件会觉得奇怪：

“为什么不把 HTML、CSS、JS 分开写？”

这个问题非常好。

从传统网页开发角度看，HTML、CSS、JS 确实可以分别写在不同文件里。
但当页面越来越复杂以后，你会发现：

• 一个按钮组件有自己的结构

• 有自己的点击逻辑

• 也有自己的样式

• 如果还分散在三个文件里，维护起来反而更乱

所以 Vue 组件更强调：

按功能模块组织代码，而不是按语言种类切文件。

比如一个“用户卡片组件”：

• 模板结构只属于这个卡片

• 逻辑也只属于这个卡片

• 样式也主要只服务这个卡片

那把它们放在一个 .vue 文件里，其实更自然。

这也是组件化开发的重要体现。

十一、template / script / style 分别负责什么？

这一部分你后面会天天看到，所以现在先建立清晰认识很重要。

1. template

template 用来写页面结构。

比如：

<template>
<div>
<h1>我是标题</h1>
<button>点击我</button>
</div>
</template>

它看起来很像 HTML，但不是完全等同于原生 HTML。
因为在 Vue 中，这里还可以写很多 Vue 自己的语法，比如：

• {{ }}

• v-bind

• v-model

• v-if

• v-for

• @click

所以你可以把 template 理解为：

带有 Vue 能力的模板区域。

2. script

script 用来写逻辑代码。

比如定义数据、定义函数、处理事件、导入组件等。

例如：

<script setup>
const title = 'Vue3 学习'
const showMessage = () => {
console.log('你好')
}
</script>

这一部分本质上还是 JavaScript 或 TypeScript。
只是它运行在 Vue 组件环境里。

3. style

style 用来写当前组件的样式。

例如：

<style scoped>
h1 {
color: red;
}
</style>

这里的 scoped 表示样式尽量只在当前组件生效，不随便影响其他组件。

所以这三部分加起来，就是一个完整组件最常见的三层结构：

• 页面长什么样

• 页面逻辑怎么跑

• 页面样式怎么控制

十二、App.vue 和普通组件有什么区别？

从本质上说，App.vue 也是组件。
它并没有一种“特殊语法身份”。

它特殊的地方只在于：

它通常被当作整个应用的根组件。

也就是说，项目启动时，main.ts 最先加载的往往就是它。

你后面可能会写：

• Header.vue

• UserCard.vue

• TodoList.vue

• StudentTable.vue

这些都是普通组件。
而 App.vue 往往负责把它们进一步组合起来，形成页面整体结构。

所以你可以把它理解成：

• 普通组件：页面中的局部模块

• App.vue：整个应用最外层的总入口组件

十三、main.ts 和 App.vue 的关系到底是什么？

这一点新手经常混。

你可以这样理解：

main.ts

负责 启动项目

它做的事情主要是：

• 导入 Vue

• 导入根组件

• 创建应用

• 挂载到页面

也就是说，它更像“启动入口”。

App.vue

负责 定义项目最外层页面内容

它做的事情主要是：

• 写页面结构

• 引入其他组件

• 承接整个应用的界面内容

所以两者关系可以总结成一句话：

main.ts 负责把项目跑起来，App.vue 负责决定项目一开始显示什么。

这是非常核心的理解。

十四、一个最小 Vue3 项目可以怎么理解？

如果你是新手，我特别建议你先用“最小思维模型”理解 Vue 项目，不要一上来就被一大堆目录吓到。

你先记住最核心的 3 个部分就行：

1. index.html

提供页面里的根容器

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

2. main.ts

启动 Vue 应用

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

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

3. App.vue

作为根组件，定义页面内容

<template>
<h1>Hello Vue3</h1>
</template>

这三者一串起来，一个最小 Vue3 项目就成立了。

你后面再逐渐往里面加入：

• 更多组件

• 更多页面

• 路由

• 状态管理

• 请求接口

但底层启动逻辑，仍然是从这里开始的。

十五、为什么新手一看到项目目录就容易慌？

因为现在前端项目普遍带工程化工具，目录天然比原生页面复杂。

你以前可能只写一个：

• index.html

• style.css

• main.js

但 Vue3 项目通常会有：

• src

• components

• assets

• views

• router

• stores

• public

• package.json

• vite.config.ts

这看起来确实更复杂。
但你要知道一件事：

这些目录不是为了故意增加难度，而是为了让项目在变大时还能保持清晰。

所以前期你不用强迫自己一次性把所有目录都搞懂。
先把最核心的：

• main.ts

• App.vue

• components

理解清楚就已经很好了。

后面我们会专门用一篇文章系统讲项目结构。

十六、新手现在最需要建立的认知是什么？

学到这里，你至少应该建立下面几个认知。

1. Vue3 不是现成网页模板

它是一个前端框架，用来帮你组织页面和逻辑。

2. Vue 页面不是直接写在 HTML 里

而是通过组件组织起来，再挂载到页面容器中。

3. createApp() 是创建 Vue 应用的入口

它是 Vue 官方提供的方法。

4. App.vue 是根组件

通常是整个项目最外层的起点。

5. .vue 文件是单文件组件

一个文件里同时管理结构、逻辑和样式。

6. main.ts 是启动入口

它负责把 Vue 应用挂载到页面中。

只要这几个点清楚了，你后面学模板语法时就不会再有那种“我到底是在写什么”的模糊感。

十七、总结

这一篇文章我们没有讲很多复杂语法，而是先把 Vue3 最基础的启动逻辑理顺了。

简单总结一下：

• Vue3 是构建用户界面的前端框架

• 它的核心思想之一是数据驱动视图

• 一个 Vue 项目通常从 main.ts 启动

• createApp(App) 用根组件创建应用

• .mount('#app') 把应用挂载到页面容器

• App.vue 通常是整个项目的根组件

• .vue 文件就是单文件组件，整合结构、逻辑和样式

对于新手来说，这一篇最重要的不是记住所有术语，而是把下面这条链真正看明白：

页面容器 → 启动入口 → 根组件 → 渲染显示

只要这个链条清楚了，Vue3 后面的很多知识点都会更容易接上。