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

全局注册,我们以topmenu为例:

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

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

<template>

   <div class="topmenu-box">

      topmenu ...

   </div>

</template>


3.在index.js文件中输入以下内容:

import topmenuComponent from './topmenu.vue'

const topmenu = {

  install: function (Vue) {

    Vue.component('topmenu', topmenuComponent)

  }

}

export default topmenu

4.在main.js中添加这个组件的引用:

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目录下,页面对应的子目录下,便于维护和管理。