Vue新手必懂:挂载#app到底是什么?看完秒明白

大家好，我是前端小助手～

最近很多刚学Vue3的小伙伴，都会卡在一个基础问题上：

“createApp(App).mount('#app') 这句话到底做了什么？”

尤其是“把Vue项目挂载到public/index.html里的#app元素”，听起来太抽象，完全摸不着头脑。

今天就用最通俗的话、最直观的案例，带大家搞懂“挂载#app”，新手也能一眼看穿，再也不用死记硬背！

先明确：2个核心文件，撑起整个Vue项目

要搞懂挂载，先找到两个关键文件——它们就像Vue项目的“地基”和“主体”，缺一不可。

① 外层“空房子”：public/index.html

这是浏览器打开你的Vue项目时，最先加载的文件，本质就是一个最普通的HTML页面。

我们打开它，里面的代码很简单，核心只有一行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue项目</title>
</head>
&lt;body&gt;
  <!-- 关键所在 -->
  <div id="app"></div>
</body>
</html>

重点看 <div id="app"></div>

1它就是一个空盒子，里面没有任何文字、图片，啥内容都没有；

1id="app" 是它的“身份证”，唯一标识这个盒子，不让它和页面里其他元素混淆；

1它的作用，就是给我们写的Vue代码，找一个“安家的地方”。

② Vue“总指挥”：src/main.ts

这个文件是Vue项目的入口，相当于“总指挥”，负责把我们写的所有组件、页面，整合起来并展示出去。

里面的核心代码，就是我们疑惑的那句：

ts import { createApp } from 'vue' import App from './App.vue' // 核心挂载代码 createApp(App).mount('#app')

这句话看似简单，其实完成了“从无到有”的关键一步——把Vue项目，“搬”进上面那个空盒子里。

通俗翻译：挂载#app = 给Vue找“安家的地方”

我们把整个过程，用一个生活中的比喻讲透，保证你记住就不会忘：

1public/index.html = 一栋刚建好的空房子；

= 房子里一间空卧室（唯一能放家具的地方）；

1App.vue + 我们写的所有组件、页面 = 家具、家电、装修材料；

1createApp(App).mount('#app') = 把所有家具、家电搬进这间空卧室，布置好，让它能住人。

完整执行流程（一看就懂）

1你打开浏览器，输入项目地址，浏览器先加载 public/index.html，看到一间“空卧室”（#app）；

1浏览器接着运行 src/main.ts，createApp(App) 就像“搬家公司”，把我们写的所有Vue代码（页面、组件、样式）整合打包好；

1.mount('#app') 就是“搬家行动”，把打包好的所有内容，一次性塞进 #app这个空盒子里；

1最终，你在浏览器上看到的所有文字、按钮、页面切换，全都是在这个 #app 盒子里展示的。

2个关键细节，新手必避坑

① id必须“一一对应”，错一个字都不行

如果 index.html 里写的是

（把app改成了root），那 main.ts 里的挂载代码，必须改成 .mount('#root')。

就像你把“卧室”的名字改成了“书房”，搬家公司必须找到“书房”，才能把家具搬进去——id不匹配，Vue项目就会“找不到家”，页面一片空白。

② Vue只“管”#app里面的内容

如果我们在 index.html 的 #app 外面，加一行原生HTML：

<body>
  <h1>我是原生HTML</h1>
  <div id="app"></div>
</body>

你会发现：“我是原生HTML”这句话，不受Vue控制，不管你怎么改Vue代码，它都会一直显示；而 #app 里面的内容，才是Vue渲染的，能随我们写的逻辑变化。

最后总结（新手必背）

挂载 #app，本质就是：给Vue项目指定一个“展示容器”，告诉Vue——你写的所有代码，都要渲染到 index.html 里 id 为 app 的这个div里。

记住一句话：没有挂载，Vue代码写得再多，浏览器也看不见（没地方放）；挂载成功，Vue才能真正“显示”在页面上。

新手延伸提问

很多小伙伴会问：“那我能不能改这个id？”

答案是：可以！但完全没必要。

Vue官方默认用 #app 作为挂载容器，所有项目模板都是这么写的，跟着默认规范来，能避免很多不必要的麻烦，新手直接不用改，专注写组件和页面就好～

下一期，我们继续拆解Vue3基础，带你搞定“响应式数据”，新手也能轻松上手！

如果觉得这篇内容对你有帮助，记得点赞+收藏，跟着我一步步从Vue新手变成高手✨

|（注：文档部分内容可能由 AI 生成）