vue封装组件打包发布到npm

自定义封装好组件

在页面引入看是否可以正常显示

<TimelineScheduler :actionInfo="actionInfo" ref="TimelineScheduler" @addAction="addAction" />

import timelineScheduler from '../components/timeline-scheduler.vue';

打包组件

• 在package.json中配置打包路径
  指令名称:命令 -- target lib --name 打包后文件名称 打包路径 --dest 打包后文件夹名
• 打包 yarn build
  打包后生成的文件
  

提交文件

• 新建文件夹
  在根目录下新建package文件夹，新建打包组件的文件，存放打包后的umd.min.js文件和css文件,
  并将文件名改为index.js index.css(或者在打包组件时将 --name 打包后文件名称 改为–name index）
• 初始化package.json
  package 文件终端初始化 npm init -y
  

{
“Name"：”menu"---包名，npm库中要唯一
“Version": “0.0.0"----每次发布的时候需要修改版本号，不能和历史版本相同
“description”:”菜单”—----对于包的描述
“private”:false ——私有化调整为false,必须调整
"main": "lib/SideMenu.umd.min.js” ---打包入口
"publishConfig" : { -----可以避免每次发包的时候都要登录
		"registry" : "https://registry.npmjs.org/“, ---仓库
  		"username": “uname”, ——用户名
 		 "password": “upwd”, ---密码
  		"email": “uemail@email.com” ---邮箱
	},
}

发布到npm

• npm login 第一次发布时需要登录（没有账号就先注册）
• 在package文件夹下执行npm publish
• 填写版本号即可

使用

组件使用Vue.use()

• 创建install函数
  新建timeline-scheduler文件夹
  
  
• 打包组件