vue文件結構及組件導入

      在App.vue文件中，定義了一個id爲app的div，在這個div板塊中放置Helloworld組件，文件內容以下圖所示：

          

在整個vue文件中，分爲三部份內容，

      第一部分是<template></template>包含的HTML頁面內容 ，開發人員能夠在這裏設計頁面展示的內容，並經過vue的一些語法加以控制，

      好比v-if  、v-for  等等；

      第二部分是<script></script>包含的頁面邏輯的實現函數，關於這部份內容，後續會有詳細的講解，此處帶過。

      第三部分是<style></style>包含的對頁面樣式的控制，能夠考慮採用scss或者css 。

 

在文件內容中，咱們能夠引入組件的方式

import HelloWorld from './components/component1.vue'

並在

export default{
    name: xxx ,
    components: {
        HelloWorld
    }
}

 另外創建一個文件 component1.vue文件，

         

    component.vue文件結構一樣是三部分，

    其中<script></script>部分中引入了echart包，並定義了當前文件中的數據data，計算方法mounted, 函數method 還有一些其餘內容...

    在vue項目中，項目的總體結構中由App.vue加載各個組件，從而實現各部分頁面的動態渲染。