1. 注册npm账号

注意认证邮箱

2. 编写插件

下面展示Vue-cli3 搭建项目的插件demo

目录结构

image.png

部分代码

mybutton.vue

<template>
  <div class="hello">
    <button type="button" class="pink-buttom">我是组件button</button>
  </div>
</template>
<script>
export default {
  name: 'my-button',
  data () {
    return {}
  }
}
</script>
<style scoped>
    .pink-buttom {
        background: pink; 
        border-radius: 5px; 
        padding: 5px 8px 5px 8px; 
        margin: 10px; 
        font-family: '幼圆';
    }
</style>

msg.vue

<template>
  <div class="hello">
    <div class="msg" :class="{active:msgStatus}">
      <div class="msg-swa">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-msg',
  props: {
    msg: String
  },
  data () {
    return {
      msgStatus: false,
      text: ''
    }
  },

  methods: {
    msgPlugin(msg, time) {
      time = time || 3000;
      this.text = msg;
      this.msgStatus = true;
      setTimeout(()=> {
        this.msgStatus = false;
      }, time)
    }
  }
}
</script>
<style scoped>
  .msg {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 50%);
    width: 0px;
    min-height: 0px;
    text-align: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
  }
  .msg.active {
    width: 150px;
    height: 25px;
    opacity: 1;
    z-index: 100;
  }
</style>

index.js


// 路径  是否查找子目录  找.vue的文件
const requireComponent = require.context('./', true, /\.vue$/);
const install = (Vue) => {
    window.console.log(1212, requireComponent.keys())
    //判断是否注册过 若注册过返回
    if (install.installed) return
    //注册
    install.installed;
    requireComponent.keys().map(component => {
        //获取组件
        const config = requireComponent(component);
        const componentName = config.default.name;
        //注册组件
        Vue.component(componentName, config.default || component);
    })
}
export default install

main.js

import Vue from 'vue'
import App from './App.vue'

import plugins from './plugins/index.js'

Vue.config.productionTip = false

Vue.use(plugins)

new Vue({
  render: h => h(App),
}).$mount('#app')

package.json
注意：name属性不能和已存在的插件重复，每次修改后需要修改version的版本号才能再次发布。

{
  "name": "3.0-pro-npmtest",    
  "version": "0.1.1",  
  "description": "npm plug-in testing",
  "license": "MIT",
  "private": false,                                          //私有别人无法下载，需要设置成公有
  "main": "lib/vue-msg-transform.umd.js",     //入口文件
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    
    "lib": "vue-cli-service build --target lib --name vue-msg-transform --dest lib src/plugins/index.js"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

关于README.md 文件，介绍如何使用插件，会体现在插件上传后的网页中，提示用户如何使用该插件。

3. 设置源

//设置源
npm config set registry https://registry.npmjs.org
cnpm config set registry http://registry.npm.taobao.org
//查看源
npm config get registry
cnpm config get registry

发布包时用npm，平时用cnpm

4. 发布包

第一次和非第一次发布包有区分

//第一次发布包，注册用户
npm adduser
//非第一次发布包，登录
npm login

npm publish --access public

5. 撤销包

1. 发布包72小时之内可以撤销

//npm unpublish 插件名称
npm unpublish @bairong-im/bairong-im-demo1@1.0.0 // 删除某个版本
npm unpublish @bairong-im/bairong-im-demo1 --force // 删除整个包

2. 发布包72小时之后，用户可以搜索到包，但是不能下载，在下载时提示用户信息

npm deprecate br-im-demo1 'I no longer maintain this package' --force

6. npm 可以建立Originations

想要上传插件到组织上，需要

1. npm scope初始化目录

npm init --scope=组织名

2. 转移源文件，在package.json 配置name值

"name": "@组织名/插件名",
"description": "插件描述",
...

npm上传插件