zoukankan      html  css  js  c++  java
  • 封装vue组件库,发布到npm

    封装vue组件库

    组件库的开发和平时项目中组件的开发过程是一样的,不同的是组件库作为一个插件使用,使用Vue.use()注册插件。

    Vue.use方法可以接收一个函数,如果是函数会直接调用这个函数;可以传入对象,传入对象,会调用这个对象的install方法。

    vue规定插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象。

    如果是直接引入组件库(如:上传cnd引入),那么需要在封装组件库时判断是否是window,并且windowVue,就install(window.Vue)

    组件开发

    在根目录下新建一个packages文件夹存放所有的组件,在packages目录下新建一个button文件夹,下面新建一个main.vueindex.js

    main.vue文件变形组件相关的业务,和平时项目中开发的组件一样

    <template>
      <button class="yun-button" :class="[`yun-button--${type}`,{
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled
      }]"
              :disabled="disabled"
              @click="handleClick">
        <i v-if="icon" :class="icon"></i>
        <span v-if="$slots.default"><slot></slot></span>
      </button>
    </template>
    
    <script>
    export default {
      name: 'MyButton',
      props: {
        type: {
          type: String,
          default: 'default'
        },
        plain: {
          type: Boolean,
          default: false
        },
        round: {
          type: Boolean,
          default: false
        },
        circle: {
          type: Boolean,
          default: false
        },
        icon: {
          type: String,
          default: ''
        },
        disabled: {
          type: Boolean,
          default: false
        }
      },
      methods: {
        handleClick (e) {
          this.$emit('click', e)
        }
      }
    }
    </script>
    

    index.js文件中主要是编写一个install,供按需引入

    // 导入组件,组件必须声明 name
    import MyButton from './src/button'
    
    MyButton.install = function (Vue) {
      // 为组件提供 install 安装方法,供按需引入
      Vue.component(MyButton.name, MyButton)
    }
    
    export default MyButton
    

    到这里我们的button组件已经封装好了,回到packages目录新建一个index.js文件,该文件作为整个组件库的入口,在该文件中引入所有的组件,遍历组件添加install方法,以及对直接引入组件库做处理

    import MyButton from './button'
    
    const components = [MyButton]
    
    // 定义 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)
    }
    
    export default {
      // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
      install,
      // 以下是具体的组件列表
      MyButton
    }
    

    到这里组件库已经封装完毕,只需要引入项目就可以使用了

    在项目的main.js中引入并且使用Vue.use()注册

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

    组件库打包发布npm

    vue-cli 构建目标为库的介绍

    根目录添加vue.config.js文件修改打包配置

    const path = require('path')
    
    module.exports = {
      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
          })
      }
    }
    

    package.json添加打包命令把packages打包"lib": "vue-cli-service build --target lib packages/index.js"

    代码上传GitHub托管

    修改package.json:private属性值改为 false,私有包npm不让上传;name属性值要npm上没有的;添加main属性,值为入口文件路径,该属性是一定要指定的(如:"main": "dist/myui.umd.min.js"),将来导入到项目将会默认导入该文件

    根目录添加.npmignore文件,用于配置忽略文件不被npm上传

    上传npm:源需要是npm,不能是淘宝源;npm login登录(需要先注册账号);npm publish发布

    以后修改后再上传需要修改package.json中的version属性,否则上传不了

  • 相关阅读:
    GZOI 2017配对统计 树状数组
    关于线段树的一些问题
    BZOJ 压力 tarjan 点双联通分量+树上差分+圆方树
    洛谷4552 差分
    洛谷5026 Lycanthropy 差分套差分
    【锁】MySQL和Oracle行锁比较
    oracle体系结构
    【加密】RSA验签及加密
    【Shiro】SpringBoot集成Shiro
    【Eureka】实现原理
  • 原文地址:https://www.cnblogs.com/YAN-HUA/p/13447588.html
Copyright © 2011-2022 走看看