共计 1759 个字符，预计需要花费 5 分钟才能阅读完成。
介绍
组件库在当下十分风行。
然而应用组件库和公布组件库就是两回事了
明天我会具体的介绍如何在 npm 公布本人的组件库，并在我的项目中应用
创立组件库，咱们明天借助 vue-sfc-rollup 这个 npm 包工具，
这是一个对于咱们创立组件十分有用的工具
该软件包为我的项目创立了一组文件。如其文档
) 所述，其创立的文件包含以下内容（SFC 代表“单个文件组件”）
- 压缩 rollupjs 配置
- 带有 build / dev 脚本和依赖项的相应 package.json 文件
- 最小的 babel.config.js 和.browserslistrc 文件用于转译
- 打包 SFC 时汇总应用的包装器
- 样本 SFC 以启动开发
- 一个示例应用文件，可用于在开发过程中加载 / 测试您的组件 / 库
开始
首先全局装置vue-sfc-rollup：
npm install -g vue-sfc-rollup
全局装置后，从命令行进入要在其中搁置库我的项目的目录。进入该文件夹后，运行以下命令来初始化我的项目。
sfc-init
在提醒中抉择以下选项：
✔ Is this a single component or a library? › Single Component
✔ What is the npm name of your component? (你的 npm 包名字)test-vue-component
✔ What is the kebab-case tag name for your component? … test-vue-component
✔ Will this component be written in JavaScript or TypeScript? › JavaScript
✔ Enter a location to save the component files: … ./test-vue-component配置实现后，进入对应文件夹进行依赖下载
cd ./test-vue-component
npm install实现后，您能够在抉择的编辑器中关上该文件夹。
如上所述，为咱们构建了一个示例 Vue 组件。您能够在 /src/lib-components 文件夹中找到它。要查看此组件的外观，能够运行 npm run serve 并导航到 http：// localhost：8080 /
公布自带示例包进行测试
npm build如文档所述：
运行在 3 个编译后的文件生成脚本后果
dist目录，每个的main，module和unpkg性能在你的 package.json 文件中列出。生成这些文件后，就能够开始了！
运行此命令后，咱们筹备公布到 NPM。在执行此操作之前，请确保您已在 NPM 上领有一个帐户（如果须要，能够在此处进行操作）。
接下来，咱们须要通过运行以下命令将您的帐户增加到您的终端：
npm adduser理解 package.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",
"files": [
"dist/*",
"src/**/*.vue"
],上面的局部 files 通知 npm 公布 dist 文件夹中的所有内容以及文件夹中的所有 .vue 文件src。您能够依据须要进行更新，然而咱们将保留本教程的内容。
因为咱们没有应用 package.json 文件进行任何更改，所以咱们筹备公布了。为此，咱们只须要运行以下命令：
npm publish
就是这样！祝贺你！您当初曾经公布了 Vue 组件库。您能够转到 npmjs.com 并在注册表中找到它
在 vue 我的项目中应用
npm instal test-vue-component
import testVueComponent from 'test-vue-component'
components:{testVueComponent}在 codesandbox 查看
这样咱们就公布了测试组件以及引入了测试组件
你学废了吗？
公布自定义组件（今天再更，上班了..）
