自定义Vue组件打包、发布到npm及使用教程
本文将帮助：将自己写的Vue组件打包到npm进行代码托管，以及正常发布之后如何使用自己的组件。
本文讲述的仅仅是最基础的实现，其他复杂的操作需要非常熟悉webpack的相关知识，作者将继续学习。
按照大佬文中写的一步步操作，够细心的话基本可以一步到位。下面总结一下发布步骤：
1.利用Vue的脚手架新建一个简易版的Vue项目my-project：
vueinitwebpack-simplemy-project->cdmy-project->npmi->npmrundev
2.编写组件：
src下新建myPlugin文件夹用于存放所以开发的组件->为每一个组件创建一个文件夹，其中存放一个vue组件文件和一个index.js配置文件->在myPlugin下的最外层创建一个入口配置文件->为每个人vue组件文件中加上一个name属性
3.测试组件：
在app.vue中测试一下自己的组件可不可以用
4.编写配置文件
为刚刚加入的每个组件文件夹中的index.js放入如下代码：（其中ldcPagination为组件名）
importldcPaginationfrom'./index.vue'; ldcPagination.install=Vue=>Vue.component(ldcPagination.name,ldcPagination);//.name就是开始说的vue文件暴露出来的name名，ldcPagination整个组件 exportdefaultldcPagination;
为myPlugin下index.js放入如下代码：（其中ldcPagination为组件名，多个组件直接在components数组中加入并在最后输出出来就行）（引入的公共样式文件等都可以放这个文件中）
importldcPaginationfrom'./Pagination/index.js';
constcomponents=[
ldcPagination
]
constinstall=function(Vue,opts={}){
components.forEach(component=>{
Vue.component(component.name,component);
});
}
if(typeofwindow!=='undefined'&&window.Vue){
install(window.Vue);
}
exportdefault{
install,
ldcPagination
}
5.改写webpack.config.js配置文件
将其中的输入输出换成如下代码：
varpath=require('path')
varwebpack=require('webpack')
constNODE_ENV=process.env.NODE_ENV;
module.exports={
//entry:'./src/main.js',
//output:{
//path:path.resolve(__dirname,'./dist'),
//publicPath:'/dist/',
//filename:'build.js'
//},
entry:NODE_ENV=='development'?'./src/main.js':'./src/myPlugin/index.js',
output:{
path:path.resolve(__dirname,'./dist'),
publicPath:'/dist/',//路径
filename:'ldc-ui.js',//打包之后的名称
library:'ldc-ui',//指定的就是你使用require时的模块名
libraryTarget:'umd',//指定输出格式
umdNamedDefine:true//会对UMD的构建过程中的AMD模块进行命名。否则就使用匿名的define
},
...
}
6.发布前准备
改写package.json中的private为false，加入"main":"dist/ldc-ui.js",其他的自定义->新建.npmignore文件忽略不需要上传的文件如.**.md*.ymlbuild/node_modules/src/test/
7.发布
npmrunbuild打包->注册npm账号->npmlogin登录->npmpublish发布
可能出现问题：
1.登录源错误，npmconfiggetregistry可查看当前登录源，npmconfigsetregistry=http://registry.npmjs.org可切换到正确的登录源
2.版本号不能重复
3.图片资源打包后无法使用，所以自己的组件中不要使用
使用组件方式：
1.npmixxx-D
2.importXXXfrom'xxx'
3.const{A,B}=XXX
4.在Vue中注册components:{A,B}
总结
以上所述是小编给大家介绍的自定义Vue组件打包、发布到npm及使用教程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。