vue组件从webpack打包到发布npm，在到本地安装使用过程

本文章主要用于vue打包到发布npm做一次记录，并且有人遇到类似问题能够提供一些帮助！！！
首先确保node.js安装，没有的同学可以到node官网下载，Node.js安装包及源码下载地址为：https://nodejs.org/en/download/，然后按照教程安装就可以了；
其次安装vue-cli，这里不做过多赘述。
以vue-loop-marquee为例:

里面包含index.js(后期打包的入口文件)和components(包含main.css和main.vue);
mian.vue(主要逻辑代码):

<template>
 <div class="det-marquee" :style="`background-color:${config.bgColor};align-items:${config.alignItems}`">
 <div ref="myMarquee" class="marquee-list first-marquee"
 :style="`line-height:${config.fontSize}px;font-family:${config.fontFamily};font-size:${config.fontSize}px;letter-spacing:${config.letterSpacing}px;font-weight:${config.fontWeight};color:${config.color};transition-duration:${animationBool ? config.animationTimer + 'ms' : ''};left:${animationBool ? 'calc(-100% - ' + marqueeEleWidth + 'px' : 0};`">
 {{config.content}}
        </div>
 <div class="marquee-list first-marquee"
 :style="`line-height:${config.fontSize}px;font-family:${config.fontFamily};font-size:${config.fontSize}px;letter-spacing:${config.letterSpacing}px;font-weight:${config.fontWeight};color:${config.color};transition-duration:${animationBool ? config.animationTimer + 'ms' : ''};left:${animationBool ? 0 : 'calc(100% + ' + marqueeEleWidth + 'px'};`">
 {{config.content}}
        </div>
 </div></template>
<script>
 export default {
        name: "vue-loop-marquee",
 data() {
            return {
                config: {
                    /**
 * @description marquee background color
 * @type {String}
 * @default bgColor = 'transparent'
 * @example header = ['column1', 'column2', 'column3']
 */ bgColor: 'transparent',
 /**
 * @description Up and down position
 * @type {String}
 * @default alignItems = 'center'
 * @example alignItems = 'flex-start' | 'center' | 'flex-end'
 */ alignItems: 'center',
 /**
 * @description text content
 * @type {String}
 * @default content = '这是一个跑马灯组件'
 */ content: '这是一个跑马灯组件',
 /**
 * @description font size
 * @type {Number<String>}
 * @default fontSize = 16
 */ fontSize: 16,
 /**
 * @description font family
 * @type {String}
 * @default fontFamily = 'Microsoft YaHei'
 */ fontFamily: 'Microsoft YaHei',
 /**
 * @description letter spacing
 * @type {Number<String>}
 * @default fontFamily = 0
 */ letterSpacing: 0,
 /**
 * @description font weight
 * @type {Number<String>}
 * @default fontWeight = 'normal'
 * @example alignItems = 'normal' | 'bold' | 100
 */ fontWeight: 'normal',
 /**
 * @description text color
 * @type {String}
 * @default fontWeight = '#000'
 */ color: '#000',
 /**
 * @description animation execution time
 * @type {Number}
 * @default animationTimer = 5000
 */ animationTimer: 5000,
 /**
 * @description pause time
 * @type {Number}
 * @default stopTimer = 1000
 */ stopTimer: 1000,
 /**
 * @description loop
 * @type {Boolean}
 * @default loop = true
 */ loop: true,
 },
 animationBool: false,
 marqueeEle: null,
 marqueeEleWidth: 144,
 }
        },
 mounted() {
            this.marqueeEle = this.$refs['myMarquee'];
 this.getVanNoticeBarWidth();
 },
 methods: {
            getVanNoticeBarWidth() {
                this.animationBool = true;
 const {marqueeEle,myHandle} = this;
 if (marqueeEle) {
                    this.marqueeEleWidth = marqueeEle.offsetWidth;
 marqueeEle.addEventListener('transitionend', myHandle, false);
 }
            },
 myHandle(){
                const {config} = this;
 let timer = null;
 let stopTimer = config.stopTimer,
 loop = config.loop;
 this.animationBool = false;
 clearTimeout(timer);
 if (loop) {
                    timer = setTimeout(() => {
                        this.animationBool = true;
 }, stopTimer);
 }
            },
 changeEleWidth() {
                const {marqueeEle} = this;
 if (marqueeEle) this.marqueeEleWidth = marqueeEle.offsetWidth;
 }
        },
 beforeDestroy() {
            const {marqueeEle,myHandle} = this;
 marqueeEle.removeEventListener('transitionend',myHandle,false);
 },
 watch: {
            "config.loop"(loop) {
                const {marqueeEle} = this;
 if (loop && marqueeEle) {
                    this.getVanNoticeBarWidth();
 }
            },
 "config.content"() {
                this.changeEleWidth();
 },
 "config.fontSize"() {
                this.changeEleWidth();
 },
 "config.letterSpacing"() {
                this.changeEleWidth();
 }
        }
    }
</script>

index.js:

import vueLoopMarquee from './components/main.vue'
export default {
    install : function (Vue) {
        Vue.component('vue-loop-marquee',vueLoopMarquee);
 }
};

整体代码逻辑写完了，接下来就是webpack打包,首先修改package.json文件

配置webpack.config.js文件（我是这样配置的）

// 引入node中的path模块，处理文件路径 的小工具
const path = require('path');
const {VueLoaderPlugin} = require("vue-loader");
// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
 // 入口
 entry: './src/lib/index.js', // 入口模块文件路径
 // 出口
 output: {
 path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
 publicPath:'/dist/',
 filename: 'vueLoopMarquee.js',
 libraryTarget:'umd',//libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
 },
 module:{
        rules:[
            {
                test:/.css$/,
 use:[
                    'vue-style-loader',
 'style-loader',
 'css-loader'
 ]
            },
 {
                test:/.vue$/,
 use:[
                    'vue-loader'
 ]
            }
        ]
    },
 plugins:[
        new VueLoaderPlugin()
    ]
}

这样webpack就配置完了，直接npm run build 打包就可以了。
发布到npm
第一步：注册npm账号，这个到官网直接注册就可以(一定要记得邮箱验证,否则发布npm会报错);
第二步：在根目录下打开命令行工具；

   1、npm whomai(查看当前登录npm账号,第一次登录不用此操作);
   2、npm login(有如下提示说明登录成功);

   3、npm publish(发布到npm) **注：(1) 发布插件的名字(package.json的name)不能与官网上有重复，可以提前到官网中搜一下;(2) 如果重新上传新的版本是记得改package.json的version,相同版本发布时报错**  ,如下就是发布成功了(也可以在官网中找到你刚才发布的插件)

截至到现在vue插件从封装到打包再到上传npm已完成，接下来在本地vue项目中安装刚刚发布的插件测试一下
1、npm i vue-loop-marquee 下图显示已安装完成

2、在main.js中全局引用

3、在页面中如下图使用就行了

4、页面显示