vue 组件库发布_如何创建和发布Vue组件库

vue 组件库发布

Component libraries are all the rage these days. They make it easy to maintain a consistent look and feel across an application.

如今，组件库风行一时。 它们使在整个应用程序中保持一致的外观和感觉变得容易。

I've used a variety of different libraries in my career so far, but using a library is very different than knowing exactly what goes into making one.

到目前为止，我在职业生涯中使用过各种不同的库，但是使用库与确切地了解制作一个库的方式有很大不同。

I wanted a more in depth understanding of how a component library is built, and I want to show you how you can get a better understanding too.

我想对组件库的构建方式有更深入的了解，并且想向您展示如何更好地理解组件库。

To create this component library, we're going to use the vue-sfc-rollup npm package. This package is a very useful utility when starting a component library.

要创建此组件库，我们将使用vue-sfc-rollup npm软件包。 启动组件库时，此软件包是一个非常有用的实用程序。

If you have an existing library that you want to use the utility with, refer to the documentation they provide.

如果您有要使用该实用程序的现有库，请参考它们提供的文档 。

This package creates a set of files for the project to start out. As their documentation explains, the files it creates includes the following (SFC stands for Single File Component):

该软件包为项目创建了一组文件。 正如他们的文档所解释的那样，它创建的文件包括以下内容(SFC代表“单个文件组件”)：

• a minimal rollup config

  最小汇总配置

• a corresponding package.json file with build/dev scripts and dependencies
  带有build / dev脚本和依赖项的相应package.json文件
• a minimal babel.config.js and .browserslistrc file for transpiling
  最小的babel.config.js和.browserslistrc文件用于转译
• a wrapper used by rollup when packaging your SFC
  打包SFC时汇总使用的包装器
• a sample SFC to kick-start development
  样本SFC以启动开发
• a sample usage file which can be used to load/test your component/library during development
  一个样本用法文件，可用于在开发过程中加载/测试您的组件/库

The utility supports both Single File Components as well as a library of components. It is important to note this sentence from the documentation:

该实用程序支持“单个文件组件