npm发布包以及更新包还有需要注意的几点问题（这里以发布vue插件为例）

vue init webpack-simple marquee

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│   ├── App.vue
│   ├── marquee
│   │   └── marquee.vue
│   │   └── index.js
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

<template>
  <div class="marquee-wrap">
    <!-- 滚动内容 -->
    <div class="scroll">
      <p class="marquee">{{text}}</p>
      <!-- 文字副本 -->
      <p class="copy"></p>
    </div>
    <!-- 为了计算总文本宽度，通过css在页面中隐藏 -->
    <p class="getWidth">{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'marquee',
  props: ['val'],
  data () {
    return {
      timer: null,
      text: ''
    }
  },
  created () {
    let timer = setTimeout(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  // 把父组件传入的arr转化成字符串
  mounted () {
    for (let item of this.val) {
      this.text += ' ' + item
    }
  },
  methods: {
    move () {
      let maxWidth = document.querySelector('.marquee-wrap').clientWidth
      // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
      let width = document.querySelector('.getWidth').scrollWidth
      // 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动
      if (width <= maxWidth) return
      let scroll = document.querySelector('.scroll')
      let copy = document.querySelector('.copy')
      copy.innerText = this.text // 文字副本填充
      let distance = 0 // 位移距离
      // 设置位移
      this.timer = setInterval(() => {
        distance -= 1
        // 如果位移超过文字宽度，则回到起点
        if (-distance >= width) {
          distance = 16 // 距离必须与marquee的margin宽度相同
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  beforeDestroy () {
    // 清除计时器
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee{
    margin-right: 16px;
  }
  p {
    word-break:keep-all;
    white-space: nowrap;
    font-size: 16px;
    font-family: "微软雅黑 Light";
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>

<template>
  <div id="app">
       <Marquee :val="msg"></Marquee>
  </div>
</template>

<script>
import Marquee from '../src/marquee/marquee.vue';
export default {
  name: 'app',
  data () {
    return {
      msg: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
    }
  },
  components:{
    Marquee
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

npm install
npm run dev

marquee/
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│   ├── App.vue
│   ├── marquee
│   │   └── marquee.vue
│   │   └── index.js
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

// index.js

// 引入组件
import marquee from './marquee';
// 组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
marquee.install = Vue => Vue.component(marquee.name, marquee); //注册组件

export default marquee;

const NODE_ENV = process.env.NODE_ENV;
module.exports = {
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/marquee/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'marquee.js', //输出文件名
    library: 'marquee', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式， UMD 同时支持两种执行环境：node环境、浏览器环境。
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
}

npm run build

marquee/
├── dist
│   ├── marquee.js
│   ├── marquee.js.map
├── index.html
├── package.json
├── README.md
├── .babelrc
├── .editorconfig
├── .gitignore
├── src
│   ├── App.vue
│   ├── marquee
│   │   └── marquee.vue
│   │   └── index.js
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

{
 "author": "maomincoding", 
  "main": "dist/marquee.js",
  "license": "ISC",
  "keywords": ["marquee"],
  "private": false,
}

.DS_Store
node_modules/
dist/    
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

npm config get registry

npm config set registry=http://registry.npmjs.org

npm config set registry=https://registry.npm.taobao.org

npm login

npm publish

# install dependencies
npm i marquee-components

import marquee from 'marquee-components'
Vue.use(marquee );

<template>
  <div id="app">
       <marquee :val="msg"></marquee>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
    }
  }
}
</script>

npm unpublish 包名 --force

I sure hope you know what you are doing

npm publish

npm init

{
  "name": "vue-cli-configjs",
  "version": "2.0.0",
  "description": "vue.config.js by vue-cli3+",
  "main": "vue.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue-cli-config"
  ],
  "author": "maomincoding",
  "license": "ISC"
}

npm publish