一、步骤一：组件的构建（组件的命名用驼峰命名法，或者短横线分隔命名）

 办法一：extend构建

应用Vue结构器，创立一个“子类”，参数是一个蕴含组件选项的对象，其中,data选项中必须是函数

var author = Vue.extend({

   template: "<p><a :href='url'>{{author}}</a></p>",  data : function() {  return {      author : 'vamous',       办法二：template标签构建法 template标签构建，需在标签上加id属性用以前期注册

<template id="myCom">

<div>这是template标签构建的组件</div>

</template>

办法三：template标签构建法(能够把组件作为独自的一个*.vue文件寄存，用时用import引入）

<template>

<div>这是template标签构建的组件</div>

</template>

<script>

import bus from '../common/bus';export default {    data() {        return {            collapse: false,            fullscreen: false,            name: 'linxin',            message: 2        }    },    computed:{        username(){            let username = localStorage.getItem('ms_username');            return username ? username : this.name;        }    },    methods:{        // 用户名下拉菜单抉择事件        handleCommand(command) {if(command == 'loginout'){                www.pizei.comlocalStorage.removeItem('ms_username')                this.$router.push('/login'); </script>

二、步骤二：组件的注册

(1)全局注册

一次注册，可在多个vue实例中应用，需调用Vue.component()办法，这个办法需传2个参数，第一个参数为组件名称，第二个参数为组件结构时定义的变量。

咱们先用全局注册注册下面例子中创立的myCom组件

Vue.component('my-com',myCom)

还有一种不需构建间接注册的写法——注册语法糖

Vue.component('my-com',{

'template':'<div>这是我的组件</div>'

})

'my-com'为给组件自定义的名字，在应用时会用到，前面myCom对应的就是下面构建的组件变量。

留神命名标准，个别组件名字以短横线分隔或一个小写单词。例：footer-nav，footernav

如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值

Vue.component('my-com',{

template: '#myCom'

})

(2)部分注册

只能在注册该组件的实例中应用

var app = new Vue({

el: '#app',components: {    'my-com': myCom}

})

注册语法糖

var app = new Vue({

el: '#app',components: {    'my-com': {       template: '<div>这是我的组件</div>'    }}

})

template及script构建的游戏组件

var app = new Vue({

el: '#app',components: {    'my-com': {       template: '#myCom'    }}

})

三、步骤三：组件的应用

咱们只需在须要调用组件的中央写上组件名字的标签即可

<div>

/*调用组件*/<my-com></my-com>

</div>