Vue 3 项目是如何运行起来的

希默软件

已于 2024-06-03 14:40:18 修改

阅读量1.5k

点赞数 34

分类专栏： Vue 3 基础文章标签： vue.js 前端 javascript

于 2024-06-03 14:39:02 首次发布

本文链接：https://blog.csdn.net/bencalie/article/details/139412510

版权

Vue 3 基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

专栏目录

《Vue 3 基础》

文章目录

专栏目录
项目入口
- 入口 index.html
- 入口 main.js
根组件 App.vue

上一篇文章提到了 Vue 3 项目创建完成后的目录结构，但没有展开说。一个 Vue 3 的项目是如何跑起来的呢？

下面使用 create-vite 重新创建一个 Vue 3 项目，所有选项都选 否，这样能看到一个纯净的 Vue 3 项目。

目录结构如下：
在这里插入图片描述

项目入口

入口 index.html

工程的根目录下有一个 index.html，这是整个应用的入口 HTML 文件，内容非常简单。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <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.js"></script>
  </body>
</html>

一眼能看到最关键的就是 <body></body> 中的两个重要信息：

一个空 div：<div id="app"></div>，后面会介绍它的用途。
通过 <script></script> 引入了一个 js 文件 /src/main.js，看起来关键逻辑就在这个 main.js 里了。

入口 main.js

那就看一下 main.js 里的玄机。

import './assets/main.css'

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

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

可以看到，逻辑更简单，真正有效的代码只有四行，我加一下注释

// 引入 CSS 文件
import './assets/main.css'

// 从 vue 中引入 createApp 这个函数
import { createApp } from 'vue'
// 从同级目录下的 App.vue 文件引入 App 组件
import App from './App.vue'

// 使用 App 组件去创建一个应用，并挂载到 <div id="app"></div> 上
createApp(App).mount('#app')

实际上执行的只有最后一行代码，这是一个级联函数调用，可以进一步拆开

// 使用 App.vue 去创建一个应用，这时候应用并不会展示在页面中
const app = createApp(App)
// 将应用挂载到 <div id="app"></div> 上，这时候通过 http://localhost:5173 在浏览器中访问应用，才能看到页面上有内容展示
app.mount('#app')

根组件 App.vue

新工程中 App.vue 的内容还是很复杂的，为了简化，可以直接把内容替换如下后保存文件：

<template>
  <div>hello world</div>
</template>

可以看到页面变成了这样，只展示 hello world（之所以有样式，是因为 main.js 里还引入了一个 CSS 文件）
在这里插入图片描述
所以，可以看到整个 src 目录下最关键的就是入口文件 main.ts 和根组件 App.vue， src 目录下其他的文件暂时都可以删除。