Vue基础：index.html、App.vue、main.js三个文件的联系

孙永潮

已于 2025-02-10 15:27:10 修改

阅读量626

点赞数 5

分类专栏：前端文章标签： vue.js

于 2025-02-10 10:58:13 首次发布

本文链接：https://blog.csdn.net/sungencheng/article/details/145542634

版权

前端专栏收录该内容

11 篇文章

订阅专栏

index.html、App.vue、main.js三个文件的联系

当vue项目npm run dev启动成功后，
浏览器就可以通过路径访问页面，那么这个页面到底展示的是哪个文件里的内容呢？

如果对前端vue有一定的基础知识，这篇文章可忽略。

在vue项目的目录结构中，有一个index.html的文件，这个就是默认首页。
vue项目的目录src 文件下，
有两个文件：
一个是根组件App.vue，
一个是入口文件main.js。

当浏览器访问vue项目时，
访问的其实是默认首页index.html，

index.html示例代码：

<!DOCTYPE html>
<html lang="">
  <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标签，导入了main.js文件 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

上述代码，通过script标签，导入了main.js文件，src=“/src/main.js”
这时，main.js文件里的代码，就会执行。

main.js的示例代码：

import './assets/main.scss'

import { createApp } from 'vue'
//导入 element-plus
import ElementPlus from 'element-plus'
//导入 element-plus 的样式
import 'element-plus/dist/index.css'
//导入router
import router from '@/router'

//导入根组件App.vue
import App from './App.vue'

//使用 createApp 方法创建 Vue 应用实例。
const app = createApp(App);

//把router传进去
app.use(router);
app.use(ElementPlus);

//使用 .mount() 方法,将应用挂载到指定的 DOM 元素上。
app.mount('#app')

在main.js中，import App from ‘./App.vue’
导入了根组件App.vue，
这样，就通过两个导入，把三个文件联系起来了。

App.vue示例代码：

<script setup>
  // JS 这里写逻辑，控制模板的数据和行为
</script>

<template>
  <!-- HTML 这里是模板部分，即给浏览器展示的内容 -->

  <!-- router-view标签，当用户访问不同路径的时候，
   该标签的作用，就是来承载router文件夹下index.js里，
   路由关系里对应组件的内容 -->
  <router-view></router-view>
</template>

<style scoped>
  /* CSS样式 控制组件展示的效果*/
</style>

在main.js中，
又导入了创建vue实例的方法createApp，
并且把根组件作为参数，
传递给createApp方法创建了App.vue组件的vue应用实例，
并用const声明一个叫app的变量来接收了这个实例，
最后又用.mount方法挂载了‘#app’,
app.mount(‘#app’)
挂载后，Vue 会接管目标 DOM 元素，并将其内容替换为根组件的模板。
(在网页开发中，DOM 元素通常指的是 HTML 文档中的标签，如 div、p、span 等）
而这个 ‘#app’,正是默认首页里，div标签id的值：id=“app”。
所以根组件App.vue会接管默认首页 div里要渲染的内容，
最终，根组件 App.vue里有什么内容，首页的div里就展示什么内容。
最后简单介绍一下 *.vue 文件：
*.vue 是Vue项目中的组件文件，在Vue项目中，
也称为单文件组件(SFC，Single-File Components)。
Vue 的单文件组件，会将一个组件的 逻辑(JS)、模板(HTML)、样式(CSS) 封装在同一个文件里（*.vue）