使用vue-sfc-rollup工具让你在npm上快速发包

本文主要是使用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包地址：传送门
• GitHub地址：传送门

步骤记录

一、准备好要发布的组件

假设我有一个组件，名字叫做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命令行操作。

在地址栏输入命令操作：

1. 全局安装

npm install -g vue-sfc-rollup

2. 安装成功后，初始化项目

sfc-init

具体操作，请仔细看下图：

按上面额步骤操作下来，工程文件夹就有东西了，然后使用vscode打开，注意目录层级结构，请仔细看下图：

三、将我们提前准备好的真正组件代码做替换即可

我们只需要替换上图中的my-star.vue文件即可。

当然，这里大家可以安装依赖包，并执行npm run serve跑起来，看看架子给到的默认my-star文件内容啥样子的。这里笔者也截个图，如下：

替换代码，并执行npm run build打包：

四、注意package.json的包名

注意，要小写，不能驼峰！

注意，这里改成 "name": "mystar" 即可。

即发布前检查一下，也可以添点东西，自己看情况为之。

五、登录npm，并发布包

注意，这里的登录npm，不是登录cnpm，所以如果大家使用的是cnpm要切回npm再去登录。

npm config set registry https://registry.npmjs.org/

发的包，注意不要和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包

使用代码：

使用效果图：

完工，以上就是今天为大家分享的关于使用 vue-sfc-rollup 工具在npm上快速发包的步骤，希望对需要的小伙伴提供参考，感谢阅读。