发布一款自己的npm包

最新推荐文章于 2024-06-06 16:53:02 发布

原创最新推荐文章于 2024-06-06 16:53:02 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm包 #发布 #发布npm #npm

JavaScript 同时被 3 个专栏收录

50 篇文章

订阅专栏

npm

2 篇文章

订阅专栏

架构

1 篇文章

订阅专栏

本文详细介绍了如何使用npm发布一个简单的Vue组件，包括账号注册、项目创建与初始化、组件编写、添加readme文档以及最终的发布流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先，你需要有个npm账号。

点击此处前往注册

2、创建项目

执行如下命令：

mkdir mynpm && cd mynpm

3、初始化项目

执行如下命令：

npm init

注：一路回车即可

4、组件编写

// 模版：
<template>
  <div class="toast">
    <div class="msg-content">{{ msg }}</div>
  </div>
</template>
<script>
export default {
  props: {
    msg: ''
  }
};
</script>
<style>
.toast {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-content {
  font-size: 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  line-height: 32px;
  padding: 0 15px;
  color: white;
}
</style>

// 引入模版
import ToastTemp from "./toast.vue";
class Toast {
  // 暴露install方法
  install(Vue, option) {
    // 编译模版
    const ToastTempCons = Vue.extend(ToastTemp);
    // 实例化原型
    const instant = new ToastTempCons();
    // 给Vue原型添加$toast方法
    Vue.prototype.$toast = function (msg, timer = 2000) {
      // 组件挂载元素
      const mountDom = document.createElement("div");
      // 赋值
      instant.msg = msg;
      // 挂载
      instant.$mount(mountDom);
      // 添加到文档刘
      document.body.appendChild(instant.$el);
      // 定时移除
      setTimeout(() => {
        document.body.removeChild(instant.$el);
      }, timer);
    };
  }
}
export default new Toast();