如何搭建和发布一个 Vue 组件库
共 4008字,需浏览 9分钟
·
2020-08-12 12:14
如今,许多组件库风靡一时,使得我们能够便捷地保持一个应用一致的外观和体验。
我至今已经使用过许多不同的组件库,不过使用组件和深入了解构建组件的过程还是有很大不同的。
我想要更深入地理解组件库的构建过程,也希望能有助于你对于这一过程的理解。
我们接下来会使用 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 文件。
这就是我们将要构建的按钮
可以直接将下面这段代码复制到你的文件中:
<button class="btn-cta">{{ text }}button>
</template>