想要在npm上快速發包？用vue-sfc-rollup工具即可&細緻圖解操作流程

問題描述

需求描述

本文記錄了使用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工具