vue in html, simple between js, vue file references and relationships

Vue relevant documentation:
index.html
use components in html

< Body > 
    < app > </ app >　　<-! Herein app inlet component the component name js main.js defined ->
     < Script the src = "build.js" > </ Script >　　<! - - js cited herein is webpack package generated js file ->
 </ body >

main.js
defined js in this document, the introduction of vue and App.vue

Vue from Import ' VUE '      // after introduction can be directly new Vue ({}) used
 Import from the App ' ./App.vue '　　// into the main assembly of
    
 new new Vue ({
　　EL: ' body ' ,
　　Components: {
　　　　App : App // App App above import is introduced; App is the name of the custom, is returned to the assembly in the use of html tags
　　} 
});

App.vue (official specification, capitalized general component files)
is defined in this file html, js, css, format:

<Template> 
    <h1 of> Vue available for purchase </ h1 of> 
    <H2 = @ the Click " Change " > {{MSG}} </ H2> 
    <My-MENU> </ My-MENU>　　<-! references other components, and then use in html -> 
</ Template> 
<Script> 
    Import from Menu ' ./components/Menu.vue '　　// other subassembly incorporated herein
 
    export default {　　// this export module and the component of vue exactly the same way, there may be directly to the data data, methods like the method definitions 
        data () { 
            return { 
                MSG: ' available for purchase Vue ^ _ ^ ' 
            } 
        }, 
        methods: { 
            Change () { 
                the this.msg = ' wahaha' 
            } 
        }, 
        Components: {
             ' My-MENU ' : Menu　　// introduce other subassembly, defined herein assignment 
        }     
    } 
</ Script> 
<style> 
    body { 
        background: #ccc 
    } 
</ style>

Menu.vue

Files in the current directory in the components folder following a component Menu.vue

<template>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</template>
<script>
    
</script>

 The final results show:

　　

 

Personal summary:

　　1, HTML file, basically you do not write anything, just write a component tag.

　　2, the inlet and main.js the document introduction vue App.vue main frame assembly, then instantiate objects vue, in components attribute defines the name of the component (the main component defines a App.vue incorporated name, is returned to the use of html file)

　　. 3, App.vue main assembly, which is a collection of html, js, css grammar, the main component in this document, references to other sub-components may, in js script tag is located, with reference import introduced into, and in the example of vue object components defined name, and then use the html template is located.

　　4, the subassembly components in the document, generally placed in this folder are sub-assembly, the main assembly is referenced App.vue.