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

学 Vue3 的时候，很多新手都会经历一个很典型的阶段：main.tsApp.vuecomponentsassetspublic然后整个人开始发懵。createApp是什么？App.vue为什么能直接导入？.vue文件到底是什么文件？又是什么意思？为什么写完这些，页面就能显示出来？这些问题如果一开始不讲清楚，后面你学模板语法、组件、路由时会一直有一种“能照着写，但不知道底层在干嘛”的感觉。所以这一

清空mega

403人浏览 · 2026-03-11 10:30:12

清空mega · 2026-03-11 10:30:12 发布

一、写在前面

学 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>

那么运行逻辑大概就是：

浏览器加载项目入口页面
页面里有一个 id="app" 的空容器
main.ts 执行
Vue 通过 createApp(App) 创建应用
用 mount('#app') 找到页面中的 #app
把 App.vue 中的内容渲染进去
页面上最终显示出 Hello Vue3

所以 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 后面的很多知识点都会更容易接上。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

收藏！从AI新手到架构师，这份系统学习路径图助你快速入门大模型

2048 AI社区

毕业季在即，GIS专业本科毕业，想走技术路线，有哪些选择？

2048 AI社区

程序员AI量化理财体系课【邢不行】量化投资视频课 25集

2048 AI社区

所有评论(0)

查看更多评论

清空mega

@2301_78986604

已为社区贡献6条内容

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

清空mega

一、写在前面

二、Vue3 到底是什么？

1. 用户界面

2. 框架

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

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

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

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

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

2. App.vue 是什么？

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

第一部分：createApp(App)

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

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

index.html

main.ts

App.vue

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

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

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

1. template

2. script

3. style

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

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

main.ts

App.vue

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

1. index.html

2. main.ts

3. App.vue

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

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

1. Vue3 不是现成网页模板

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

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

4. App.vue 是根组件

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

6. main.ts 是启动入口

十七、总结

所有评论(0)

清空mega

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

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

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

2. `App.vue` 是什么？

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

第一部分：`createApp(App)`

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

`index.html`

`main.ts`

`App.vue`

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

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

1. `template`

2. `script`

3. `style`

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

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

`main.ts`

`App.vue`

1. `index.html`

2. `main.ts`

3. `App.vue`

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

4. `App.vue` 是根组件

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

6. `main.ts` 是启动入口