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加载各个组件，从而实现各部分页面的动态渲染。