首頁  >  文章  >  web前端  >  app.vue檔案幹啥的

app.vue檔案幹啥的

青灯夜游
青灯夜游原創
2022-12-23 13:50:136427瀏覽

app.vue是vue頁面資源的首加載項,是主組件,頁面入口文件,所有頁面都是在App.vue下進行切換的;app.vue負責構建定義及頁面組件歸集。 app.vue檔案的作用:1、一般就是指整個vue專案的根元件,用來展示元件中內容;2、App.vue是針對整個專案稱作根元件,template下的子元素是針對目前的vue實例稱作根組件。

app.vue檔案幹啥的

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

app.vue是什麼?有什麼用?

app.vue是vue頁面資源的首加載項,是主元件,頁面入口文件,所有頁面都是在App.vue下進行切換的;也是整個專案的關鍵,app.vue負責建構定義及頁面元件歸集。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;
}
</script>

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

app.vue中不但可以當做是網站首頁,也可以寫所有頁面中公共需要的動畫或樣式。不在上面寫程式碼也可以。

app.vue是主元件,是頁面入口文件,是vue頁面資源的首加載項。所有的頁面都是在app.vue中進行切換的。可以理解為所有的路由都是app.vue的子元件。

app.vue的作用

1、App.vue檔案一般就是指整個vue專案的根元件,用來展示元件中內容。

2、App.vue是針對整個專案稱為根元件,template下的子元素是針對目前的vue實例稱為根元件。

main.js,App.vue,index.html之間的關係

在初始化的Vue專案中,我們最先接觸到的就是main.js,App.vue,index.html這三個文件,我們從培訓影片或官方文件可以了解到:

##index .html---首頁,專案入口

App.vue---根元件

main.js---入口檔案

那麼這幾個文件之間的連結如何呢?

1.先看index.html中的內容:(為了很好的標識各個文件,我對各文件進行了文字標記)

#2.在App.vue中,我做了以下處理:

3.在main.js中,檔案初始內容如圖:

#那我們打卡的網頁如何呢?

網頁效果如下:

也就是說,在網頁的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',
  //components: {App },
  //template: '578d07aa9e36ca6b43806c9706879c6d'
})
告訴該實例要掛載的地方;(即

實例裝載到index.html中的位置

接著,實例中註冊了一個局部元件App,這個局部元件App來自於哪裡呢?

import App from './App.vue'new Vue({
  //el: '#app',  components: {App },
  //template: '578d07aa9e36ca6b43806c9706879c6d'
})
這個局部元件是目前目錄下的App.vue;

而起模板是什麼呢?模板就是元件App.vue中的template的內容。 (template會取代原來的的掛載點處的內容)

 

所以Vue這個實例就是戰士的是App.vue這個元件的內容

 所以,我們進行總結:在專案運行中,main.js作為專案的入口文件,運行中,找到其實例需要掛載的位置,即index.html中,剛開始,index.html的掛載點處的內容會被顯示,但是隨後就被實例中的元件中的模板中的內容所取代,所以我們會看到有那麼一瞬間會顯示出index.html中正文的內容。

而index.html中的T​​itle部分不會被取代,所以會一直保留。

【相關推薦:

vuejs影片教學web前端開發

以上是app.vue檔案幹啥的的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn