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

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

相关推荐
m0_748233643 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟12 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386313 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596013 分钟前
前端代理,解决跨域问题讲解
前端
quitv18 分钟前
react脚手架配置别名
前端·javascript·react.js
嘵奇19 分钟前
Node.js二:第一个Node.js应用
node.js
m0_5287238127 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星29 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端