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

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

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

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、页面显示