5521 vue编写全局组件

index.js

// 这是导入组件的模块
// import Button from "./Button.vue";
// import Icon from "./Icon.vue";
// import ButtonGroup from "./ButtonGroup.vue";

const install = (Vue) => {
  //把所有的组件设成全局组件
  // Vue.component(Button.name,Button)
  // Vue.component(Icon.name,Icon)
  // Vue.component(ButtonGroup.name,ButtonGroup)

  // 优化写法：require.context()
  // 参数：路径，是否遍历，正则
  const requireComponent = require.context(".", true, /\.vue/);
  requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName);
    // console.log(config);
    Vue.component(config.default.name, config.default);
  })
}
// script  vue是放在window下， 放在模块内
if (typeof window.vue !== "undefined") {
  install(vue);
}

export default {
  install
}

mian.js

import Vue from ‘vue‘
import App from ‘./App.vue‘
// import zfUi from "./packages/index"  
import zfUi from ‘z-z-ui‘;
import "z-z-ui/dist/zf-ui.css";

 // Vue.use默认会调用install方法
Vue.use(zfUi)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

5521 vue编写全局组件

原文：https://www.cnblogs.com/jianjie/p/13751800.html