Vue 项目中 main.js、App.vue、index.html、index.js 组件的作用

最新推荐文章于 2025-03-02 19:28:41 发布

生化环材

最新推荐文章于 2025-03-02 19:28:41 发布

阅读量4.6k

点赞数 7

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

原文链接：https://blog.csdn.net/weixin_40013817/article/details/102697408

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细解读了Vue项目中的关键文件：index.html作为入口，承载挂载点；main.js负责初始化Vue实例和引入组件；App.vue为核心组件，包含路由；index.js配置路由并导入组件。了解它们如何协同工作，是构建Vue应用的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 项目中 main.js、App.vue、index.html、index.js 组件的作用

index.html

项目的运行入口，在body体中只有一个 div 标签，其 id 为 app，这个 id 将会连接到 src/main.js 内容。
在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html 中定义的正文部分。上面有一个 id 为 app 的挂载点，之后我们的 Vue 根实例就会挂载到该挂载点上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
  </head>
  <body>
    <div id="app">test</div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

入口文件，主要作用是初始化vue实例，并引入所需要的插件。新建了一个 vue 实例，并使用 el：#app 链接到 index.html 中的 app，并使用 template 引入组件和路由相关的内容，也就是说通过 main.js 我们关联到 App.vue 组件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

App.vue

主组件，所有页面都是在 App.vue 下进行切换的。可以理解为所有的路由 router，也是 App.vue 的子组件。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Index.js

标签下，有标签，标签将会把路由相关内容渲染在这个地方，路由中文件位于src/router/index.js 中。在 index.js 的代码中，建立了路由相关的内容，也就会渲染到 app.vue 下面的中。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})