当前位置: 首页 > Web前端 > vue.js

vue-cli打包npm组件关键点记录

时间:2023-03-31 17:22:26 vue.js

先创建项目vuecreateprojectname(vueinit是老版本)然后将目录整理成下面的examples将开发的组件存放在本地测试包中然后在npm命令行整理package.json。入口文件定义在config.js上。附上vue.config.js配置方案。vuecli官网介绍了构建库。注意:如果css需要合并打包在一起,需要在vue.config.js中添加配置:css:{extract:false},packages/index.jscontent//导入打包好的组件importfontChangefrom'./components/font-change'importMt1from'./components/mt1'constcomponents=[Mt1,fontChange]constinstall=function(Vue){//遍历并注册所有组件components.map(com=>{Vue.component(com.name,com)})}//注意这里的判断,很重要if(typeofwindwo!=='undefined'&&window.Vue){install(window.Vue)}//导出组件库exportdefault{install,//componentlist...components,}注意:组件代码必须定义name,以便index.js调用npm发布npmlogin登录并设置版本号后,就可以npmpublish了。登录的话还是报错:Youmustsignupforprivatepackagesnpm这个只有当你的包名是@your-name/your-package时才会出现。原因是当包名以@your-name开头时,npmpublish默认会发布为私有包,但是npm私有包是需要付费的,所以需要添加如下参数进行发布:npmpublish--accesspublicnewprojectreferencenpmadd@xxx/packages--保存更新版本npmupdate@xxx/packagesmain.js里importxxxfrom'@xxx/packages'Vue.use(xxx)