一、开始

之前在codepen等地方看到各种各样的样式，非常炫酷。

我这两天做了一个库，整理封装了一些效果，顺便练下打包发布。

仓库和文档链接放在末尾。

二、如何发布

在src文件夹中新建package文件夹，这里放你需要发布的组件。

在这边创建组件之后，建议试着渲染到屏幕上，也可以看看有没有小bug啥的。

在package下新建index.js,并写下以下代码(改为自己的组件)

//引入组件
import UbColor from './ub-color/ub-color.vue'
import UbLight from './ub-light/ub-light.vue'
import UbAni from './ub-ani/ub-ani.vue'
import UbBlack from './ub-black/ub-black.vue'
import UbCyber from './ub-cyber/ub-cyber.vue'

const coms = [UbColor,UbLight,UbAni,UbBlack,UbCyber];

//批量注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

export default install;

在package.json配置后续用来打包的命令

"package": "vue-cli-service build --target lib ./src/package/index.js --name ultra-button --dest ultra-button" 

将命令中的ultra-button改为你的名字。

打包后，在打包的文件夹（我的是ultra-button）执行npm init -y。

在npm注册账号，并切换为官方源，npm adduser添加用户。

npm publish就是发布。

后续如果要更新的话，重新打包，最好把打包后的package json修改下版本号，即可更新。

三、ultra-button

这里放一些我这个库的按钮样式，欢迎来玩~

仓库链接，欢迎star：github.com/heygsc/ultr…

ultra-button文档链接：ultra-button-docs.pages.dev