尝试发布一个按钮npm包

昨天尝试了第一次发布一个npm包~还是比较简单的

又想起自己在之前整了一个hy-button组件,那么我能不能将这个组件运用起来发布到npm呢?以后自己也可以使用!

看看之前的组件

Vue3标签组件绘制--自定义按钮组件-CSDN博客

于是我找到了之前的组件,修改了下准备发布的npm包的文件结构,并将组件导出

重新发布了hy-button2.0.1版本

一.新建一个vue项目

javascript 复制代码
<template>
  <div class="blackbg"></div>
</template>
<style scoped>
.blackbg{
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}
</style>

清空主界面存放黑色背景板备用

二.下载less和hy-button组件

npm install less

npm install hy-button

三.配置全局

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { HyButton } from 'hy-button';

const app = createApp(App)

app.use(router)
app.component('HyButton', HyButton);
app.mount('#app')

四.使用

javascript 复制代码
<template>
  <div class="blackbg">
    <hy-button type='special'>坏越的按钮</hy-button>
  </div>
</template>
<style scoped>
.blackbg{
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}
</style>

javascript 复制代码
<template>
  <div class="blackbg">
    <hy-button plain round type="danger">坏越的按钮</hy-button>
    <hy-button plain block type="warn">坏越的按钮</hy-button>
    <hy-button plain block type="primary">坏越的按钮</hy-button>
  </div>
</template>
<style scoped>
.blackbg{
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}
</style>

上边是当前设定的一些方法,没有设定太多,可能还比较粗糙哈哈,有好的想法欢迎探讨~

相关推荐
天天扭码几秒前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger6 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话6 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时7 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳7 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子9 分钟前
深入解析 iframe
前端
WEI_Gaot9 分钟前
ES6 模板字符串
前端·javascript
前端大白话9 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
前端大白话10 分钟前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
前端大白话12 分钟前
深入理解 JavaScript 中 async 函数与 await 关键字的执行奥秘
前端·javascript·架构