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

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

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#