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加載各個組件，從而實現各部分頁面的動態渲染。