介绍现在组件库很流行。但是使用组件库和发布组件库是两件不同的事情。今天我将详细介绍如何在npm上发布自己的组件库，并使用它在项目中创建组件库。今天我们使用npm打包工具vue-sfc-rollup，它是我们创建组件非常有用的工具。这个包为项目创建了一组文件。如其文档中所述），它创建的文件包括以下（SFC代表“单一文件组件”）压缩的rollupjs配置对应的package.json文件，带有构建/开发脚本和依赖最小的babel.config.js和.browserslistrc文件打包SFC时使用的转译包装器示例SFC以开始开发一个示例使用文件，可用于在开发期间加载/测试您的组件/库首先首先全局安装vue-sfc-rollup：npminstall-g在vue-sfc-rollup之后全局安装，从命令行转到要放置库项目的目录。进入该文件夹后，运行以下命令来初始化项目。sfc-init在提示中选择以下选项：?这是单个组件还是库？?单一组件?您的组件的npm名称是什么？（你的npm包名称）test-vue-component?你的组件的kebab-case标签名称是什么？...test-vue-component?这个组件是用JavaScript还是TypeScript编写的？?JavaScript?输入一个保存组件文件的位置：..../test-vue-component配置完成后，进入下载对应文件夹的依赖cd./test-vue-componentnpminstall安装完成后，您可以在您选择的编辑器中打开该文件夹。如上，为我们构建了一个示例Vue组件。您可以在/src/lib-components文件夹中找到它。要查看此组件的外观，您可以运行npmrunserve并导航至http://localhost:8080/publish附带一个用于测试npmbuild的示例包，如文档所述：Runthebuildscriptonthe3compiledfilesresults在dist目录中，每个main、module和unpkg属性都列在package.json文件中。生成这些文件后，您就可以开始了！运行此命令后，我们就可以发布到NPM了。在执行此操作之前，请确保您已经在NPM上拥有一个帐户（如果需要，您可以在此处进行）。接下来我们需要通过运行将您的帐户添加到您的终端：npmadduserunderstandpackage.json发布到npm时，我们使用package.json文件来控制发布哪些文件。如果您查看最初设置项目时创建的package.json文件，您会看到类似以下内容："main":"dist/test-vue-component.ssr.js","browser":"dist/test-vue-component.esm.js","module":"dist/test-vue-component.esm.js","unpkg":"dist/test-vue-component.js","文件":["dist/*","src/**/*.vue"]以下部分文件告诉npm发布dist文件夹中的所有内容和src文件夹中的所有.vue文件。您可以根据需要进行更新，但我们会保留本教程的内容。由于我们没有对package.json文件进行任何更改，我们已准备好发布。为此，我们只需要运行以下命令：npmpublish就可以了！恭喜！您现在已经发布了Vue组件库。可以去npmjs.com在registry里面找到在vue项目中使用npminstaltest-vue-componentimporttestVueComponentfrom'test-vue-component'components:{testVueComponent}在codesandbox中查看这样我们发布测试组件以及引入其他编译好的css和img测试组件，这里需要引入相应的插件"rollup-plugin-css-porter":"^1.0.2","rollup-plugin-img":"^1.1.0"
