基于vue-cli快速发布vue npm 包

news2024/9/20 20:45:23

一、编写组件

1. 初始化项目并运行
vue create vue-digital-count

npm run serve
2. 组件封装
  • 新建package文件夹

​ 因为我们可能会封装多个组件，所以在src下面新建一个package文件夹用来存放所有需要上传的组件。
​ 当然，如果只有一个组件，直接放到src下面也无可厚非。
在这里插入图片描述

  • 编写组件代码 digitalCount
    可通过正常组件使用流程引入进行开发、调试
<template>
  <div class="module-count-box"> 
    <div v-for="(site, index) in list" :key="index">
      <div v-if="site.num !== ','" class="site-item">
        <!-- :style 动态移动距离 -->
        <div class="num-list-box" :style="{ top:'-'+site.top+'px' }">
          <p v-for="num in numList" :key="num + '-' + Math.random()" class="num-item">{{ num }}</p>
        </div>
      </div>
      <div v-else class="comma-item">,</div>
    </div>
  </div>
</template>

<script>
  export default {
  	// 必须要有name属性哦，便于后期组件引入并作为组件名
    name: 'VueDigitalCount',
    props: { 
      number: { // 显示的数字
        type: [Number, String],
        default: 0
      },
      showLength: { // 最长显示多少位数字
        type: Number,
        default: 9
      },
      autoFillLength: { // 是否自动用0补齐显示的长度
        type: Boolean,
        default: true
      }
    }, 
    data() { 
      return { 
        list: [], 
        numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      } 
    }, 
    watch: {
      number: {
        handler(newValue, oldValue) {
          this.initNumber()
        },
      }
    },
    mounted() { 
      this.initNumber(true)
    }, 
    methods: { 
      // 在指定位置添加逗号; 参数是字符串
      addCommaToStr(str) {
        let tempArr = str.split('').reverse(); // 实际显示多少位
        for (let i = tempArr.length - 1; i >= 0; i--) {  
          if ((i + 1) % 3 === 0) {  
            tempArr.splice(i + 1, 0, ',');  
          }  
        }
        // 如果最后一个元素为，则删除
        if (tempArr.at(-1) === ',') {
          tempArr.pop();
        }

        // 反过来展示，变成从后面往前，每隔3位加逗号
        return tempArr.reverse();
      },
      // 给数组计算要偏移的高度
      calcMoveHeight(dealArr, isReset) {
        let result = dealArr.map(value => {
          return { num: value }
        }); 
        if (isReset) { // 只有第一次需要重置数据
          result = result.map(item => {
            return {
              ...item,
              top: 0
            }
          })
        }
        
        let itemHeight = 80; // 每一个元素的高度
        result.forEach((value, index) => {
          setTimeout(() => { 
            // value.top = parseFloat((value.num * itemHeight)) || 0; 
            // 使用$set保证数据更新时能触发页面更新
            this.$set(value, 'top', parseFloat((value.num * itemHeight)) || 0)
          }, (index === null ? 0 : index) * 150); // 每个元素间隔150ms去计算偏移的距离
        }); 
        return result;
      },
      initNumber(isReset = false) {
        let fillContent = ''; // 前面填充的字符串（全是0）
        const numStr = this.number.toString(); // 将props转成字符串
        let showNumber = numStr; // 最终展示的字符串，默认就是传过来的数据
        if (this.autoFillLength) { // 需要自动填充
          if (numStr.length < this.showLength) { // 小于指定显示的位数
            fillContent = new Array(this.showLength - numStr.length).fill(0).join(''); // 生成指定位数的0的数组并转化为字符串
          }
          showNumber = fillContent + showNumber; // 在前面填充0，达到指定位数
        }

        // 通过方法，往字符串里添加逗号
        const resultArr = this.addCommaToStr(showNumber);

        // 计算每个数字需要滚动的距离
        this.list = this.calcMoveHeight(resultArr, isReset);
      },
    } 
  }
</script>

<style scoped>
.module-count-box {
  display: flex;
}
.module-count-box .site-item { 
  width: 66px; 
  height: 80px; 
  overflow: hidden;
  text-align: center; 
  display: flex;
  margin: 0 4px; 
  background: url("@/assets/count_num_bg.png") no-repeat;
  background-size: 100% 100%; 
  position: relative; 
}
.module-count-box .site-item .num-list-box {
  position: absolute; 
  top: 0; 
  left: 0; 
  transition: all 1.5s ease-in-out 0s;
  /* top: -80px; */
} 
.module-count-box .site-item .num-list-box > .num-item {
  width: 66px; 
  height: 80px; 
  font-size: 56px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  color: #fff
}

.module-count-box .comma-item {
  font-size: 100px;
  color: #BBD7FF;
  margin-top: -26px;
}
</style>
3. 使用vue插件模式

该步骤时组件封装的重点，即利用vue的公开方法： install
install 方法会在你使用 Vue.use(plugin) 时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。

在package目录下新建index.js文件，代码如下：

// 1. 引入组件
import VueDigitalCount from './digitalCount';

// 2. 用数组保存组件，便于遍历
const components = { VueDigitalCount };

// 3. 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return;
  install.installed = true; //标识已经安装
  // 遍历并注册全局组件
  Object.keys(components).forEach(key => {
    Vue.component(key, components[key]);
  });
}

// 对于那些没有在应用中使用模块化系统的用户（如在html中直接使用vue），他们往往将通过 <script> 标签引用你的插件，并期待插件无需调用 Vue.use() 便会自动安装 
// 添加如下几行代码来实现自动安装：
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
};


// 4. 导出组件
// 将每个组件导出，便于不全局注册时，单个使用component注册为页面级组件
export {
  VueDigitalCount
};

// 导出install方法，用于vue.use 注册全局插件
export default install;

二、使用 vue-cli 打包库

首页，来看看官网的描述：构建模板 - 应用
在这里插入图片描述

注意： css: { extract: false } 这个配置；

因为vue-cli默认打包后是将css抽离出来成为一个单独的文件；所以在使用的时候就需要单独将css引入，相对麻烦。类似element-ui有这么一步：

import 'element-ui/lib/theme-chalk/index.css';
1. 修改 package.json 文件，在scripts配置打包命令
"package": "vue-cli-service build --target lib ./src/package/index.js --name vue-digital-count --dest dist"

打包命令解释：

  • target lib 关键字， 指定打包的目录
  • name 打包后的文件名字
  • dest 打包后的文件夹的名称

打包后的文件如下：
因为我在 vue.config.js 配置了 css: { extract: false }；所以没有单独的css文件

在这里插入图片描述

修改package.json 其他配置，适用于npm发包
  • 重要：新增配置入口文件 mian ，使用umd.min.js（适用于所有平台）
  • 去除 "private": true, private字段可以防止我们意外地将私有库发布到npm服务器。只需要将该字段设置为true
  • 新增 author、license、 keywords、description、 repository 、homepage 等字段，没有的可以不用配置
    在这里插入图片描述

配置详情：

{
  // 发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
  "name": "#####",
  // 版本号，每次要更新
  "version": "1.0.0",
  // 包的描述
  "description": "仅供测试，别下载",
  // 文件入口，默认是 index.js，可修改
  "main": "index.js",
  "scripts": {
    // 测试命令，可以不填直接回车
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // 作者名称
  "author": "###",
  // 包遵循的开源协议，默认是ISC
  "license": "ISC",
  // 因为组件包是公用的，所以 private 为 false
  "private": false,
  // 当前包需要依赖的第三方组件，如何安装使用依赖包，可以看看文章顶部的NPM命令介绍文章
  "dependencies": {},
  // "devDependencies": {}
  // 指定代码所在的仓库地址
  "repository": {
    "type": "git",
    "url": "https://github.com/dengzemiao/DZMFullPage.git"
  },
  // bug在哪里提
  "bugs": {
     "url": "https://github.com/dengzemiao/DZMFullPage/issues"
  },
  // 项目官网的地址
  "homepage": "https://github.com/dengzemiao/DZMFullPage",
  // 指定打包后,包中存在的文件夹
  "files": [
    "dist",
    "src"
  ],
  // 指定了项目的目标浏览器的范围
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  // 项目关键词，供搜索
  "keywords": [
    "测试"
  ]
}

三、上传至 npm

ps： 想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

1. 设置npm源

如果本地npm采用的是淘宝镜像源或者其它，需要改成 npm 官方源

npm config set registry=https://registry.npmjs.org

npm 查看使用的包源是哪一个：`npm config get registry`
2. 添加npm用户

进入 vue-digital-count 目录，执行命令：

npm adduser

需要输入账号、密码、邮箱和邮箱验证码；第一次才需要
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e5318c9d1e5e4fd5a6

3. 发布
npm publish

发布包前最后提前在npm官网查询报名是否重名，避免发布失败。发布成功后即可到npm官网上查看自己发布的npm包。

4. 更新包

修改package.json文件里面的version字段，然后重新 npm publish 即可

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1325855.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

云原生系列2-CICD持续集成部署-GitLab和Jenkins

云原生系列2-CICD持续集成部署-GitLab和Jenkins

1、CICD持续集成部署 传统软件开发流程&#xff1a; 1、项目经理分配模块开发任务给开发人员&#xff08;项目经理-开发&#xff09; 2、每个模块单独开发完毕&#xff08;开发&#xff09;&#xff0c;单元测试&#xff08;测试&#xff09; 3、开发完毕后&#xff0c;集成部…
阅读更多...
【人生苦短，我学 Python】（9）分支判断和循环

【人生苦短，我学 Python】（9）分支判断和循环

目录 简述 / 前言1. 顺序结构2. 选择结构2.1 单分支2.2 双分支2.3 多分支 3. 循环结构3.1 for 循环3.1.1 range() 3.2 while 循环3.2.1 break 语句3.2.1 continue 语句 3.3 死循环 4. enumerate 函数5. zip 函数文章传送门 简述 / 前言 前面讲了输入、输出和文件的读写&#x…
阅读更多...
【UML】第5篇 UML中的视图和图

【UML】第5篇 UML中的视图和图

目录 一、视图和图 二、图的种类 2.1 结构图 2.2 行为图 图是UML中最重要的概念了&#xff0c;起码我是这么认为。 上篇关于低代码的文章&#xff0c;我也说了&#xff0c;未来也许AI编码&#xff0c;我们更重要的工作&#xff0c;是能够为业务进行建模&#xff0c;拆解&a…
阅读更多...
【51单片机系列】C51中的中断系统扩展实验

【51单片机系列】C51中的中断系统扩展实验

本文是关于51单片机中断系统的扩展实验。 文章目录 一、 扩展实验一&#xff1a;使用外部中断0控制蜂鸣器&#xff0c;外部中断1控制直流电机二、扩展实验二&#xff1a;修改定时器初值&#xff0c;设定3秒钟的定时时间让LED模块闪烁三、扩展实验三&#xff1a;使用定时器1和数…
阅读更多...
KBP310-ASEMI适配高端电源KBP310

KBP310-ASEMI适配高端电源KBP310

编辑&#xff1a;ll KBP310-ASEMI适配高端电源KBP310 型号&#xff1a;KBP310 品牌&#xff1a;ASEMI 封装&#xff1a;KBP-4 最大平均正向电流&#xff1a;3A 最大重复峰值反向电压&#xff1a;1000V 产品引线数量&#xff1a;4 产品内部芯片个数&#xff1a;4 产品内…
阅读更多...
哈希算法专栏二《力扣题目练习》

哈希算法专栏二《力扣题目练习》

引言 在了解了哈希表的基础理论之后&#xff0c;我们就可以开始进行刷题实战了。下面是我在力扣上找的一些题目&#xff0c;认真刷完并理解下面的题目&#xff0c;相信读者至少可以初步掌握哈希算法的思想了。 LeetCode242有效的字母异位词 242. 有效的字母异位词 已解答 简…
阅读更多...
智能化安防与监控：全球发展、挑战与未来趋势

智能化安防与监控：全球发展、挑战与未来趋势

导言 智能化安防与监控系统在全球范围内得到广泛应用&#xff0c;成为社会安全和公共管理的重要工具。本文将深入研究其发展历程、遇到的问题及解决过程、未来的可用范围&#xff0c;以及在各国的应用和未来的研究趋势&#xff0c;以探讨在哪些方面能取胜&#xff0c;并在哪些方…
阅读更多...
简易实现 STL--list

简易实现 STL--list

实现 list 的主要思想及过程 首先&#xff0c;实现过程中的所有代码必须放在自己定义的命名空间中。 定义一个结点的结构体类模板&#xff0c;结点的数据类型就应该是模板类型 T&#xff0c;定义的 next指针和 prev指针都应该是模板指针类型&#xff0c;并且结构体类中药有构…
阅读更多...
git的使用思维导图

git的使用思维导图

源文件在github主页&#xff1a;study_collection/cpp学习/git at main stu-yzZ/study_collection (github.com)
阅读更多...
力扣：77. 组合（回溯， path[:]的作用）

力扣：77. 组合（回溯， path[:]的作用）

题目&#xff1a; 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2&#xff1a; 输入&…
阅读更多...
MS5541/MS5542，高精度DAC，2.7V 到 5.5V、串行输入、电压输出、16 位数模转换器，可替代AD5541

MS5541/MS5542，高精度DAC，2.7V 到 5.5V、串行输入、电压输出、16 位数模转换器，可替代AD5541

MS5541/MS5542 是一款单通道、 16 位、串行输入、电压 输出的数模转换器&#xff0c;采用 2.7V 至 5.5V 单电源供电&#xff0c;输出范围 为 0V 至 V REF 。在输出范围内保证单调性&#xff0c;在温度范围为 -40 C 至 85 C 能够提供 1LSB INL 的 14 位精度。…
阅读更多...
pycharm git 版本回退

pycharm git 版本回退

参考 https://blog.csdn.net/qq_38175912/article/details/102860195 yoyoketang 悠悠课堂
阅读更多...
PLC物联网，实现工厂设备数据采集

PLC物联网，实现工厂设备数据采集

随着工业4.0时代的到来&#xff0c;物联网技术在工厂设备管理领域的应用日益普及。作为物联网技术的重要一环&#xff0c;PLC物联网为工厂设备数据采集带来了前所未有的便捷和高效。本文将围绕“PLC物联网&#xff0c;实现工厂设备数据采集”这一主题&#xff0c;探讨PLC物联网…
阅读更多...
合并一个excel文件中的多个sheet

合并一个excel文件中的多个sheet

import pandas as pd #要合并的文件路径 filepath/Users/kangyongqing/Documents/kangyq/202311/班均及合班储备/最后校验/二批次组班/ file1z小班合班方案_2012&#xff08;1&#xff09;.xlsx #获取文件d的所有sheet名 df1pd.read_excel(filepathfile1,sheet_nameNone,engine…
阅读更多...
Graylog配置日志保留策略

Graylog配置日志保留策略

找了半天没找到说的清楚的&#xff0c;只能抠官方文档 graylog的归档&#xff08;日志持久化&#xff09;只有付费版才能用&#xff0c;所以日志只能存在es中 1.理解官方给出的几个概念 轮转策略 (Index Rotation Strategy): 轮转策略定义了何时创建新的索引以及何时关闭旧的索…
阅读更多...
C语言-＞ 文件操作（函数满屏）

C语言-＞ 文件操作（函数满屏）

系列文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,数据结构,函数-CSDN博客 目的&#xff1a;学习文件操作&#xff0c;即…
阅读更多...
gitee的学习

gitee的学习

1.git下载 下载地址&#xff1a;https://git-scm.com/ 2.建立远程仓库 访问&#xff1a;gitee.com 在此网站上创建 3.本地操作 在本地找一个任意文件&#xff0c;克隆git 执行命令&#xff1a;git clone https://gitee.com/beijing-jiaxin-times_0/test_zsx_cang_ku.git …
阅读更多...
变分自动编码器【03/3】：使用 Docker 和 Bash 脚本进行超参数调整

变分自动编码器【03/3】：使用 Docker 和 Bash 脚本进行超参数调整

一、说明 在深入研究第 1 部分中的介绍和实现&#xff0c;并在第 2 部分中探索训练过程之后&#xff0c;我们现在将重点转向在第 3 部分中通过超参数调整来优化模型的性能。要访问本系列的完整代码&#xff0c;请访问我们的 GitHub 存储库在GitHub - asokraju/ImageAutoEncoder…
阅读更多...
[c]用指针进行四个数排序

[c]用指针进行四个数排序

#include<stdio.h> void swap(int*p1,int*p2)//定义函数&#xff0c;实现两个数值交换 {int temp;temp*p1;*p1*p2;*p2temp; } void psort( int *pa, int *pb,int *pc,int *pd) {int i1;for(i1;i<3;i)//对四个数排序&#xff0c;至少3次循环&#xff0c;交换过后是升序…
阅读更多...
海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

海康威视IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

漏洞介绍 海康威视IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 Hikvision Intercom Broadcasting System 3.0.3_20201113_RELEASE(HIK)版本存在操作系统命令注入漏洞&#xff0c;该漏洞源于文件/ph…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023