如今，许多组件库风靡一时，使得我们能够便捷地保持一个应用一致的外观和体验。

我至今已经使用过许多不同的组件库，不过使用组件和深入了解构建组件的过程还是有很大不同的。

我想要更深入地理解组件库的构建过程，也希望能有助于你对于这一过程的理解。

我们接下来会使用  vue-sfc-rollup  这个 npm 包来构建这个组件库，这是一个非常实用的组件库构建工具。

如果想用这个工具管理现有的组件库，可以查看文档。

这个工具为我们创建了项目的文件结构，如文档所说，它创建了以下文件（SFC 即 Single File Component）：

• 一个最简的  rollup  配置文件
• 一个包含 build/dev 脚本和项目依赖的 package.json 文件
• 一个最简的用于转译的 babel.config.js 和 .browserslistrc 文件
• rollup 打包 SFC 时用到的包装器（wrapper）
• 一个 SFC 示例文件
• 组件库的使用示例

这个工具同时支持单文件组件和组件库，注意文档中的这句话：

在 library 模式下有一个 'index' 文件，其中声明了需要暴露哪些组件到你的库中。

也就是说，在设置过程中会额外生成一些文件。

开始构建

首先，全局安装  vue-sfc-rollup：

npm install -g vue-sfc-rollup

安装完成后，在命令行窗口进入想要在其中保存项目文件的目录，执行如下命令来初始化项目。

sfc-init

在提示中选择如下选项：

• Is this a single component or a library?  Library
• What is the npm name of your library?  （名称在 npm 中必须是唯一的，这里我使用的是  brian-component-lib）
• Will this library be written in JavaScript or TypeScript?  JavaScript（可以放心地选择 TypeScript，只要你清楚自己的选择）
• Enter a location to save the library files:  （项目的文件夹名称，默认为之前步骤设置的 npm 名称，所以可以直接按 enter 取默认值。）

设置完成之后，进入项目目录并执行 npm install。

cd path/to/my-component-or-lib

npm install

完成之后，选择一个编辑器来打开项目目录。

如上所述，在  /src/lib-components  文件夹中可以看到，一个示例 Vue 组件已经为我们构建好了。要查看效果，可以运行  npm run serve  命令，然后在浏览器中访问  http://localhost:8080/。

开始添加我们的自定义组件。在这个示例中，我打算模拟 freeCodeCamp 的任务介绍部分的按钮，所以在  lib-components  文件夹中新建一个名为  FccButton.vue  的 Vue 文件。

这就是我们将要构建的按钮

可以直接将下面这段代码复制到你的文件中：