vue file structure

1// file name: index.vue
2// structure for vue 2
3<template>
4  // HTML code 
5  // within one element for vue2
6</template>
7<script>
8// js code
9export default {
10	components: {
11      // vue component to use in html
12    },
13    data () {
14      return{
15        // all global variables should be declear here
16        // this.varName to access variable
17        randomVar: 12,
18        randomVar2: "Suman"
19      }
20    },
21    computed:{
22      // act as variable
23      // syntex will be same as function
24      // return value will be stored 
25    },
26    methods: {
27      // all global function should be declear here
28      // you can use all js syntex here
29    },
30    mounted (){
31      // all other js code to be execuated here (my suggestion)
32      // this is a part of "vue-lifecycle"
33      // for more details: 
34      // https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
35    }
36}
37</script>
38<style scoped>
39// css code
40// scoped will enclose all css code within this vue file
41</style>