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

Vue组件从webpack打包到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(主要编译代码):index.js:importvueLoopMarqueefrom'./components/main.vue'exportdefault{install:function(Vue){Vue.component('vue-loop-marquee',vueLoopMarquee);}};总体来说代码逻辑写完了，接下来就是webpack打包了。首先修改package.json文件，配置webpack.config.js文件（我是这样配置的）//导入node中的path模块，一个处理文件路径的小工具constpath=require('path');const{VueLoaderPlugin}=require("vue-loader");//导出一个带有特殊属性配置的webpack对象module.exports={mode:'none',//指定模式配置:"development"|“生产”|"none"//entryentry:'./src/lib/index.js',//入口模块文件路径//exitoutput:{path:path.join(__dirname,'./dist/'),//如果打包后的结果文件生成的目录是绝对路径publicPath:'/dist/',filename:'vueLoopMarquee.js',libraryTarget:'umd',//libraryTarget会生成不同的umd代码，你可以只是标准的commonjs也可以参考amd的标准，或者只能通过script标签引入umdNamedDefine:true//将在UMD构建过程中命名AMD模块。否则使用匿名定义。},模块:{规则:[{test:/.css$/,使用:['vue-style-loader','style-loader','css-loader']},{test:/.vue$/,use:['vue-loader']}]},plugins:[newVueLoaderPlugin()]}这样webpack配置就完成了，直接npmrunbuild打包即可。发布到npm第一步：注册一个npm账号，可以直接在官网注册（一定要记得邮箱验证，否则发布npm会报错）；第二步：打开根目录下的命令行工具；1.npmwhomai(查看当前登录的npm账号，首次登录不需要此操作)；2.npmlogin（出现如下提示，表示登录成功）；3.npmpublish（发布到npm）**注意：（1）发布的插件名称（package.json的名称）不能和官网重复，可以提前搜索官网；（2）如果重新上传新版本，记得更改package.json的版本，发布相同版本时会报错**，如下，发布成功（也可以找pluginyoujustreleasedontheofficialwebsite）至此，vue插件已经打包，打包，上传到npm。接下来在本地的vue项目中安装刚刚发布的插件并进行测试。1.npmivue-loop-marquee下图显示安装完成2.main.js中的全局引用3.如下图在页面上使用即可4.页面显示