vue组件编写（页面模块化）

在复杂页面的开发中，内容比较多，所以我们需要将它们分模块，这样也有利于一些模块的复用。组件分两种，一种是全局的，注册后所有页面都可以调用，另一种是局部的，一般是指定页面使用。

全局注册，我们以topmenu为例：

1.在components目录下建立一个topmenu子目录，在这个子目录下分别建立index.js和topmenu.vue两个文件；

2.在topmenu.vue文件中输入以下内容：

<template>
    <div class="topmenu-box">
        topmenu ...
    </div>
</template>

<script>

</script>

import topmenuComponent from './topmenu.vue'

const topmenu = {
  install: function (Vue) {
    Vue.component('topmenu', topmenuComponent)
  }
}

export default topmenu

import topmenu from './components/topmenu'
Vue.use(topmenu)

这样就完成了topmenu组件的定义和引用配置，然后在其它子页面中，我们只要用 <topmenu></topmenu> 的形式进行引用就可以了。

局部注册，上面的内容去掉 index.js ，然后 main.js 中的引用方式改为 页面中如下定义引用：

import topmenu from './components/topmenu/topmenu.vue'

export default {
  components: {topmenu},
  ...

实际项目中，一般会在components目录下放一些全局的组件，比如富文本编辑器什么的，而具体的子页面，则会放在views目录下，页面对应的子目录下，便于维护和管理。