VUE编写插件上传npm

前言

这篇文章是准备不写的，因为之前写过uniapp插件上传npm，然后加上在手写VUE步骤条组件这篇文章中有提到后期会将这个步骤条组件上传到npm仓库，然后我就用上传uniapp插件的方式试着上传VUE这个插件，上传是能上传，结果在VUE项目中npm安装的这个插件的时候就无法安装，于是我就再思考，哦原来这个uniapp插件上传和VUE插件上传还不一样，于是就有了这篇文章！

开干

1.创建一个空VUE项目
之前创建VUE项目的时候，应该用的是下面这个命令

vue init webpack you-project

但是我们现在不是开发项目，而是一个插件，所以不用创建完整的VUE环境，使用如下命令创建即可

vue init webpack-simple you-project

两者的差异


这里基本上无需更改什么信息，我这个步骤条的插件需要使用到sass依赖，所以正好可以在此将环境安装好！完整项目结构如下！

2.启动项目
先执行下面命令

npm install

这里install的耗时较长，请不用使用cnpm淘宝镜像，因为如果在这里更改为淘宝镜像后，后期推送npm插件的时候有需要更换回来，环境依赖安装完后，启动项目

npm run dev

启动成功！

3.删除一些没必要的文件
这一步可做可不做，主要就是让使用我们插件的同行，看插件依赖时不这么懵逼！对比两张图就清楚明白这步的意义了！
这是没有做删除的插件

这是做了删除的插件

关于这个dist大家先不用管，后面会讲到这个，

将assets目录删除了，这个目录就是存放资源的，如果插件中没有什么静态资源可以干掉，其他的就不用动了！

4.编写插件
如果插件工程量比较大的话可以创建目录分开，我这个插件就比较简单，所以就不搞这么大的架子，结构如下图

simple-step-bar.vue，这个就是步骤条组件代码，index.js就是对外暴露我们组件的文件，此处需要注意的是 install。 Vue的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的所有的组件。

5.修改配置项 webpack.config.js

entry: './src/plugin/index.js',//指定插件的对外暴露文件
  output: {
    
    
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//build后项目生成目录
    filename: 'simple-step-bar.js',//build后的文件名
    library: 'simple-step-bar', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

• library：指定的就是你使用require时的模块名
• libraryTarget：为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。
• umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  有时我们想开发一个库，如lodash，underscore这些工具库，这些库既可以用commonjs和amd方式使用也可以用script方式引入。

这时候我们需要借助library和libraryTarget，我们只需要用ES6来编写代码，编译成通用的UMD就交给webpack了

6.编译插件

扫描二维码关注公众号，回复： 12973804 查看本文章

npm run build

7.修改package.json 文件

发布开源因此需要将这个字段改为 false
“private”: false,

这个指 import simple-step-bar 的时候它会去检索的路径
“main”: “dist/simple-step-bar.js”,
注意这里如果不指定这个文件会导致引用组件是找不到这个组件

8.编写README.md文件
这步操作如果你想让使用者猜你写的插件的话就没必要做了，如果不想那就在这个README.md文件中详细的编写这个插件怎么使用！

插件上传npm后别人进入插件后这个文件就会给使用者做引导！如下图

9.本地登录npm

npm login

没有npm账号的去官网注册一个完事了npm官网，这里还要注意邮箱验证的问题，不然无法上传插件。uniapp插件上传npm这篇文章中有描述

10.插件推送npm

npm publish

推送成功后控制台如上，然后绑定的邮箱中就会送到通知，无需查看！

然后npm仓库后台就会改变插件数量！

这是我们推送的simple-step-bar这个插件不会立马显示，只是改变仓库插件的数量，大概等个2分钟才会显示！


那么到这里npm上传VUE插件就完成了！

11.npm下载插件测试

npm i super-step-bar

安装成功后再node_modules中会有当前插件

12.项目使用simple-step-bar插件

import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);

vue界面中使用



测试代码

<template>
  <div id="app">
    <div class="description-div">默认</div>
    <simple-step-bar></simple-step-bar>

    <div class="description-div">rem单位</div>
    <div>
      <button @click="less(1)">后退</button>
      <button @click="plus(1)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='80' :totalHeight='3' :unit='"rem"'
      :stepList="stepList1" :currentStep="currentStep1"
      :itemWidth='40' :lienWidth='0.1'
    ></simple-step-bar>

    <div class="description-div">px单位</div>
    <div>
      <button @click="less(2)">后退</button>
      <button @click="plus(2)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='720' :totalHeight='48' :unit='"px"'
       :stepList="stepList2" :currentStep="currentStep2"
       :itemWidth='240' :lienWidth='2'
    ></simple-step-bar>

    <div class="description-div">个性化样式</div>
    <div>
      <button @click="less(3)">后退</button>
      <button @click="plus(3)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='80' :totalHeight='3'
      :unit='"rem"' :stepBackground='"#FFFFFF"'
      :stepList="stepList3" :currentStep="currentStep3"
      :itemWidth='20' :lienWidth='0.1' :lienColor='"red"'
      :processingFontColor='"#ffffff"' :processingFontColorN='"#FF0005"'
      :processingBackground='"#ef5e41"' :stepBorderColor='"#FF0005"'
    ></simple-step-bar>
  </div>
</template>

<script>
  export default {
    
    
    name: 'app',
    data() {
    
    
      return {
    
    
        stepList1:["步骤a","步骤b"],
        stepList2:["步骤1","步骤2","步骤3"],
        stepList3:["步骤一","步骤二","步骤三","步骤四"],
        currentStep1:1,
        currentStep2:2,
        currentStep3:3,
      }
    },
    methods:{
    
    
      plus(type){
    
    
        switch (type) {
    
    
          case 1:
            this.currentStep1++;
            break;
          case 2:
            this.currentStep2++;
            break;
          case 3:
            this.currentStep3++;
            break;
        }
      },
      less(type){
    
    
        switch (type) {
    
    
          case 1:
            this.currentStep1--;
            break;
          case 2:
            this.currentStep2--;
            break;
          case 3:
            this.currentStep3--;
            break;
        }
      }
    }
  }
</script>

<style lang="scss">
  #app {
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .description-div{
    
    
    margin-top: 2rem;
    height: 2rem;
  }
</style>

关于该组件详细使用情况手写VUE步骤条组件，害，本来只想写一个步骤条的功能的，结果硬是写成了插件，还既然开源挂载npm上了服了！

npm：simple-step-bar
gitee：simple-step-bar

其他

npm上传插件名不能和其他人的插件重名
版本不能重，所以每次更改后需要修改一下版本

npm version 1.1.0

每次上传新的版本是需要从新build一下，然后才能推送上去

npm run build 

如果自己仓库已经存在插件，那么删除24小时后才能从新使用删除的名字！

npm unpublish guitest@1.0.1 //指定版本号

另外主要是处于安全性考虑，在Azer NPM 撤包事件后，npm公布了一版新的规则，如下

• 版本更新少于24小时的包允许下架；
• 超过24小时的包的下架需要联系npm维护者；
• 如果有npm维护者参与，npm将检查是否有其他包依赖该包，如果有则不允下架；
• 如果某个包的所有版本都被移除，npm会上传一个空的占位包，以防后来的使用者不小心引用怀有恶意的替代者。