Vue project files App.vue

      In App.vue file, define a div id of the app, this assembly is placed Helloworld div section, the contents of the file as shown below:

          

Throughout vue document is divided into three parts,

      The first part is <template> </ template> HTML page content, developers can be included here to show the contents of the page design and controlled by some of the syntax of vue,

      Such as v-if, v-for like;

      The second part is the <script> </ script> logical page included implement a function on this section, a detailed explanation will follow, with over here.

      The third part is the <style> </ style> contains a page style control, or could be considered scss css.

 

In the content of the document, we can see a way to load components

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

And

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

 Create a separate file component1.vue file,

         

    component1.vue file structure is also a third portion, wherein the <script> </ script> introduced echart bag section, data defining the current data file, Mounted calculation method, there are other functions method contents ...

    In vue project, the overall structure of the project App.vue load various components, to achieve dynamic rendering of each part of the page.