[ npm ] 发布属于自己的包——我的vue组件ui库 (use vue-cli3)

最新推荐文章于 2024-08-17 19:13:55 发布

ljw1412

最新推荐文章于 2024-08-17 19:13:55 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： npm vue vue-cli3.x

本文链接：https://blog.csdn.net/ljw1412/article/details/101152550

版权

本文详述了如何使用vue-cli3创建并发布自己的Vue组件UI库到npm。从删除public文件夹、清空src，到创建组件、配置打包脚本，再到编写package.json，最后通过npm登录和发布，实现组件的使用。

摘要由CSDN通过智能技术生成

前置步骤：

使用 vue-cli 3 创建项目。

1. 删除 public 文件夹

2. 清空 src 文件夹

3. 在 src 中创建入口文件 main.js

4. 在 src 中创建组件文件夹 components

得到以下结构

第一步：在 src/components 中创建组件（以简单的 TButton 按钮组件为例）

<template>
  <button class="t-button"
    :class="{'t-button--disabled':disabled}"
    @click="onButtonClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: "TButton",

  props: { disabled: Boolean },

  methods: {
    onButtonClick(e) {
      if (this.disabled) return;
      this.$emit("click", e);
    }
  }
};
</script>

<style>
.t-button {
  padding: 5px 10px;
  color: #ffffff;
  background-color