vue 如何把封装的组件以install 的方式提供给组员

1. 创建packages文件夹（与src同级）

2. 把组件我们封装的组件移入到packages文件夹里面，并在文件内创建index.js 文件

由于我这边有icon 样式，所以把样式表也要放进去

3.在packages文件下index.js文件中对封装组件进行注册。

// 统一导出
// 导入颜色选择器组件
import Button from './button'
import Dialog from './dialog'
//导入字体图标
import './fonts/font.scss'

// 存储组件列表
const components = [
  Button,
  Dialog,
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

// 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
export default {
  install
}

因为我用到字体图标，所以需要把图标样式也导入进去

4. 找到vue.config.js 文件，添加以下代码

const path = require('path')
module.exports = {
  // 这是去除eslint 的，没有用的可以不用谢
  lintOnSave: false,
  // 这个是打包编译的入口文件，如果你的文件src文件名改成了examples,那么下面的src也要换成examples
  // 如果src 文件没有重命名，可以不用pages这段代码。
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

5. 引用。在src 目录下的main.js中引用

import MsUI from '../packages'
Vue.use(MsUI)

以上就是就是全过程了啊！这样子就可以在我们的页面正常的使用我们自己封装的组件了。

如果对你有用，可以点个赞哦！如果有疑问或者不足可以评论一下，我们相互探讨学习啊！(*￣︶￣)