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

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(33784)   2024-03-16 09:30:24

在初始化的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部分不会被取代,所以会一直保留。

 


 

 

标签2: vue
地址:https://www.leftso.com/article/767.html

相关阅读

vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量&lt;li  v-if="Object.keys(searchResultDataLis...
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文&lt;body&gtl;     &lt;di...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...
vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } ...
一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决
一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:va...