Vue中main.js App.vue index.html之间关系

教程分享 > WEB技术 > JavaScript (48580) 2024-08-07 11:21:12

在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:
vue空白项目

关于三个文件的说明如下:
 

  • index.html---主页,项目入口
  • App.vue---根组件
  • main.js---入口文件

那么这几个文件之间的联系如何呢?

1.先看index.html中的内容:(为了很好的识别各个文件,我对各文件内容进行了文字标记)
 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-start|来自index.html的标题</title>
  </head>
  <body>
    <div id="app">
      来自index.html的内容
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.在App.vue中,我做了如下处理:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>来自App.vue的内容</div>
    <!--<router-view/>-->
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.在main.js中,文件初始内容如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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/>'
})

 

接下来运行这个项目,观察显示

网页效果如下:

vue-start demo 运行效果图

也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分

那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,

而index.html中

    <div id="app">
      来自index.html的内容
    </div>

上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上

 main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过
 

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

告诉该实例要挂载的地方;(即实例装载到index.html中的位置)

接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢?
 


import App from './App'


Vue.config.productionTip = false

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

这个局部组件是当前目录下的App.vue;


模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容)


 所以Vue这个实例就是展示的是App.vue这个组件的内容

 
总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。而index.html中的Title部分不会被取代,所以会一直保留。

 


 

 

vue
https://www.leftso.com/article/767.html

相关文章
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
在vue2.0中使用了axios库,设置请求头Content-Type='application/json;charset=UTF-8'无效axios.defaults.headers.comm...
普通写法​vantUI 使用字体图标和文字&lt;template&gtl; &lt;van-tabbar v-model="active" active-color="#07c160"&gtl...
前言有时候,我们需要对js的原生对象进行扩展,达到全局使用更方便的效果
js 生成二维码引入qrcode.js该框架基于HTML5原生编写,兼容性较好。支持H5 vue uniapp 微信小程序等。基本使用参考&lt;div id="qrcode"&gtl;&lt;...
步骤:1、配置文件webpack.config.js:  {     test:/\.css$/,     loader:'style-loader!css-loader'  ...