尝试发布一个按钮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>

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

相关推荐
bin91534 分钟前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云2 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一2 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球2 小时前
el-button按钮的loading状态设置
前端·javascript
kidding7232 小时前
前端VUE3的面试题
前端·typescript·compositionapi·fragment·teleport·suspense
Σίσυφος19004 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端4 小时前
0基础学前端-----CSS DAY13
前端·css
css趣多多5 小时前
案例自定义tabBar
前端
姑苏洛言6 小时前
DeepSeek写微信转盘小程序需求文档,这不比产品经理强?
前端
林的快手6 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari