Vue 封装共用组件的两种方法

方法一：
main.js 中：
import ListItem from './components/list.vue'
Vue.component('ListItem',ListItem);

方法二：
新建vue文件的时候再建个相应的js文件
child.js：
import child from './components/child.vue'

const count = {
    install:function(Vue){
        Vue.component(child.name, child); // 注册，可以批量。注册后需要在入口文件 Vue.use(x);
    }
}
export default count;

/*
写法二：
count.install = function (Vue) {
  Vue.component('count', countDown)  // 用countDown.name 不行，可把我坑惨了
}
export default count;*/

main.js中：
import child from './components/child.js'
Vue.use(child);

全局组件的批量安装

/*****************
    全局组件安装 component_install.js
******************/
/*----------------分页组件----------------*/
import page from '../components_base/page.vue'
/*----------------提示弹窗组件----------------*/
import modalNotice from '../components_base/modal_notice.vue'
/*----------------基础弹窗组件----------------*/
import modal from '../components_base/modal_base.vue'

/*----------------批量注册----------------*/
const component = {
    install:function(Vue){      
        Vue.component('vui-page',page);     
        Vue.component('modal-base',modal);
        Vue.component('modal-notice',modalNotice);
    }
}
export default component

/******app.js********/
// 全局组件安装
import component from './common/component_install'
Vue.use(component);

封装js公共方法

// util.js
var common = {
  fn1:function () {
    return 1
  },
  fn2:function () {
    return 2
  }
}
export default common;

// main.js
import utils from '../common/util'
Vue.prototype.utils = utils;