乐趣区

关于npm:想要在npm上快速发包用vuesfcrollup工具即可细致图解操作流程

jiezi

问题形容

需要形容

本文记录了应用 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 包

应用代码

应用效果图

退出移动版