介绍
组件库在当下十分风行。
然而应用组件库和公布组件库就是两回事了
明天我会具体的介绍如何在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-componentnpm 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-componentimport testVueComponent from 'test-vue-component'components:{testVueComponent}在codesandbox查看
这样咱们就公布了测试组件以及引入了测试组件
你学废了吗？