vue 如何开发封装自己的公共组件库,并发布到 npm 上

作者: tww844475003 分类: 前端开发 发布时间: 2021-07-11 14:46

一、全局安装 vue-cli 脚手架,使用 vue init webpack-simple yyl-npm-practice 初始化项目

初始化项目后 npm install ; npm run dev,项目就能跑起来了。下面我们来试着封装一个属于我们自己的公用组件 Button

在 src 目录下新建一个 components 存放自定义组件

// Button.vue
<template>
  <button :class="classes" type="button" @click="onClick">
    <span v-if="label">{{ label }}</span>
    <slot v-else></slot>
  </button>
</template>

<script>
import './button.css'

export default {
  name: 'ife-button',
  props: {
    label: {
      type: String,
      required: false
    },
    primary: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium',
      validator: function(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1
      }
    }
  },
  computed: {
    classes() {
      return {
        'ifrontend-button': true,
        'ifrontend-button--primary': this.primary,
        'ifrontend-button--secondary': !this.primary,
        [`ifrontend-button--${this.size}`]: true
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style scoped>

</style>
// button.css
.ifrontend-button {
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
.ifrontend-button--primary {
  color: white;
  background-color: #1ea7fd;
}
.ifrontend-button--secondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.ifrontend-button--small {
  font-size: 12px;
  padding: 10px 16px;
}
.ifrontend-button--medium {
  font-size: 14px;
  padding: 11px 20px;
}
.ifrontend-button--large {
  font-size: 16px;
  padding: 12px 24px;
}

写一个这种简单自定义组件,很简单。我相信只有用过 vue 做过项目开发的同学都可以比较得心应手的做好。这块就不废话了。

二、配置工程,使我们的组件能够发布开源库,让更多的人能够可以方便的安装依赖使用

  • 项目根目录新建一个 index.js
import IfeButton from './src/components/Button'
import _Vue from 'vue'

IfeButton.install = (Vue) => {
  if (!Vue) {
    window.Vue = Vue = _Vue
  } else {
    Vue.component(IfeButton.name, IfeButton)
  }
}

export default IfeButton
  • 修改 package.json

只有 private: false,你这个组件库才能发布到 npm 。 main字段是 require 方法可以通过这个配置找到入口文件,这是模块加载规范,。

  • 修改 webpack.config.js

设置 调试和发布 entry 入口文件及 output 打包输出;.map 的生成修改。npm run build 会发现输出文件改了,.map 文件也没有生成。

  • 修改 index.html

到这里,一个简单的 button 组件我们算是制作完成,只需要发布 npm ,就能够开放出去用了。当然最好还是修改一下 README.md 说明文档,方便读者快速接入自己的应用。

三、发布到 npm

  • npm 官网注册个账号 www.npmjs.com/
  • 根目录执行 npm login 命令,输入用户名、密码、邮箱
  • npm publish

这个 npm login 可能有个坑大家需要注意一下,其实严格来说不是坑,只是国内的开发者由于安装模块网速问题。一般都设置了 npm 淘宝镜像。执行上面的登录命令会报错 “e409 Conflict”,出现这个报错的小伙伴先不要着急,其实只要把镜像设置成 npm 默认的就行了,找到 .npmrc registry=http://registry.npmjs.org/

npm publish 完没有报错,输出上传结果就说明上传成功了。每次发布注意需要修改 package.json version , 否则可能发布不上去。发布成功后,你之前注册帐号的邮箱会收到 Npm 官网回给你的一封邮件。也可以在 Npm 官网查看自己发布的组件。

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注