从组件库构建入门到实战：Vue cli3 库模式快速搭建组件库并发布到 npm

前言

市面上目前已有各种各样的 UI 组件库，比如 Element 和 iView，他们的强大毋庸置疑。但我们经常面临着需求越来越复杂的情况，当它们不能再满足我们需求的时候，就有必要开发一套属于自己团队的组件库了。

所以本文的目的就是让读者能通过此文，快速创建一个简单的组件库并发布到 npm，供他人使用。

搭建组件库

1. 创建 Vue cli3 项目

vue create --preset cli-plugin <project-name>

2. 配置 Vue cli3

// vue.config.js
module.exports = {
  publicPath: '/<project-name>/',
  lintOnSave: false
}

3. 安装组件库依赖

npm install --save-dev @vue/cli-plugin-component

4. 创建组件库

vue invoke @vue/cli-plugin-component create

5. 编写组件

在 src/components 目录下创建组件文件，例如 Button.vue：

<template>
  <button>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button'
}
</script>

<style>
/* 按钮样式 */
</style>

6. 打包组件库

npm run build

发布组件库

1. 登录 npm

npm login

2. 创建 npm 包

npm publish --access public

使用组件库

1. 安装组件库

npm install <project-name> --save

2. 使用组件

import { Button } from '<project-name>'

export default {
  components: {
    Button
  }
}

结语

以上就是 Vue cli3 库模式构建组件库并发布到 npm 的教程。希望本文对您有所帮助。

常见问题

1. 如何将组件库发布到其他平台？

除了 npm 之外，您还可以将组件库发布到其他平台，如 GitHub、Gitee 等。具体方法请参考相关平台的文档。

2. 如何更新组件库？

当您对组件库进行更新时，需要重新打包并发布组件库。具体步骤请参考上文中的「发布组件库」部分。

3. 如何使用组件库中的组件？

在使用组件库中的组件之前，需要先安装组件库。具体方法请参考上文中的「使用组件库」部分。