问题形容
需要形容
本文记录了应用vue-sfc-rollup工具，去将咱们封装的vue组件，发到npm上，以便于组件共享。
就npm发包而言，工具有很多，不过vue-sfc-rollup是一个轻量级的工具，可能疾速实现发包需要
vue-sfc-rollup介绍
官话介绍：
vue-sfc-rollup is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component (SFC) - or library of multiple SFCs - into a form ready to share via npm. It doesn't assume any particular flavor of CSS or docs generator, so you can use what you're already used to. It's the fastest way to produce npm-ready vue components!
艰深解释阐明：
vue-sfc-rollup是一个脚手架模板工具，在vue语法中生产，制作，公布npm包，是最快的办法
- NPM包地址：https://www.npmjs.com/package/vue-sfc-rollup
- GitHub地址：https://github.com/team-innovation/vue-sfc-rollup
步骤记录
第一步，筹备好要公布的组件
假如我有一个组件，名字叫做myStar，就是一个盒子中搁置三颗星星，长相如下图：
代码如下：
<template> <div class="myStarWrap"> <span class="starItem">✡️</span> <span class="starItem">⭐</span> <span class="starItem"></span> </div></template><script>export default { name: "myStar" };</script><style scoped>.myStarWrap { box-sizing: border-box; display: flex; justify-content: space-between; width: 150px; height: auto; padding: 4px; padding-bottom: 8px; background-color: #e9e9e9; border: 1px solid #666666;}/* 悬浮放大 */.myStarWrap .starItem { font-size: 32px; cursor: zoom-in; transition: all 0.36s;}.myStarWrap .starItem:hover { transform: scale(1.2);}</style>我当初筹备把这个代码发到npm下面，应用vue-sfc-rollup工具
第二步，全局装置vue-sfc-rollup并初始化我的项目
比方，我在桌面新建一个叫做npm的文件夹，在此文件夹中进行操作
而后双击关上文件夹，进行cmd命令行操作
在地址栏输出命令操作：
// 先全局装置
npm install -g vue-sfc-rollup// 装置好了当前，就能够初始化我的项目了
sfc-init具体操作，请认真看下图
一波操作下来，工程文件夹就有货色了，而后应用vscode关上，留神目录层级构造，请认真看下图
第三步，将咱们提前准备好的真正组件代码做替换即可
咱们只须要替换上图中的my-star.vue文件即可
当然，这里大家能够装置依赖包，并执行npm run serve跑起来，看看架子给到的默认my-star文件内容啥样子的。这里笔者也截个图，如下
替换代码，并执行npm run build打包
第四步，留神package.json的包名
留神，要小写，不能驼峰
留神，这里改成 "name": "mystar" 即可
即公布前检查一下，也能够添点货色，本人看状况为之
第五步，登录npm，并公布包
发的包，留神不要和npm上曾经有的包重名了，要不然提交不下来的
就像git要登录当前提交代码，npm也要登录当前能力发包，大家肯定要提前注册好npm的账号，并用本人的账号登录公布publish，如下图
npm login登录
npm publish发包
第六步，在npm上看到本人刚刚公布的包
留神，淘宝镜像10分钟同步一次，略微期待一下即可
第七步，切回cnpm，并通过npm下载刚刚公布的包
切回cnpm淘宝镜像
npm config set registry http://registry.npm.taobao.org/
包装置好了当前，在node_modules文件中能看到哦
第八步，应用本人的npm包
应用代码
应用效果图