第二天：vue全局导入组件，也是创建组价组件库的方式

我想写一篇专题博文，每天一个知识点

第二天

vue

20200408 全局导入组件

// 组件目录下新建一个index.js 文件
// 这其实就是开发公共组件库的方式， 以下为内容



// 导入button组件
import WButton from './Button'

// 组件列表
const components = [
  WButton
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  WButton
}





// 这里还有懒人模式 -----------------------------------------------------

// import Vue from "vue";
function changeStr(str) {
  //首字母大写
  return str.charAt(0).toUpperCase() + str.slice(1);
}
//找到上一级common目录下的.vue结尾的所有文件
const requireComponent = require.context("./common", false, /\.vue$/);

console.log(requireComponent.keys());
//["./child1.vue", "./child2.vue"]
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => {
    let config = requireComponent(fileName);
    let componentName = changeStr(
      fileName.replace(/^\.\//, "").replace(/\.\w+$/, "")
    );
    console.log(config);
    // console.log(componentName); //Child1   Child2
    Vue.component(componentName, config.default || config);
  });
};
export default {
  install,
};

// 引用方式  main.js

// 导入组件库
import wui from '../packages'
// 注册组件库
Vue.use(wui)