创建UI组件库后上传NPM

上篇已经讲了如何创建自己的组件库,这篇讲怎么上传npm后,可以下载使用

1.首先看下组件的文件结构

 在index.js中要写上每个组件可以按需引用的条件

import Button from "./src/button";Button.install = function(Vue) {Vue.component(Button.name, Button);
};export default Button;

2.然后这些组件要有个总的入口index.js

import Row from "./row/index.js";
import Col from "./col/index.js";
import Button from "./button/index.js";const components = [Row,Col,Button
];const install = Vue => {// 判断是否安装if (install.installed) returncomponents.forEach(component => {Vue.component(component.name, component);});
};// 判断是否是直接引入文件,如果是,就不用调用Vue.use()
if (typeof window !== "undefined" && window.Vue) {install(window.Vue);
}export default {version: require('../package.json').version,install,Row,Col,Button
};

3.在设置下vue.config.js

const { defineConfig } = require("@vue/cli-service");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = defineConfig({transpileDependencies: true,//解决build打包的时候 dist文件里面css、js、img路径错误错误的问题publicPath: "./",outputDir: "dist",assetsDir: "public",pages: {index: {entry: "examples/main.js",template: "public/index.html",filename: "index.html",},},// 扩展 webpack 配置, 使 packages 加入编译chainWebpack: (config) => {// 配置js和babel-loaderconfig.module.rule("js").include.add(path.resolve(__dirname, "packages")).end().use("label").loader("babel-loader").tap((options) => {// 修改它的选项return options;});// 配置自定义md-loaderconfig.module.rule("md-loader").test(/\.md$/).use("vue-loader").loader("vue-loader").end().use("md-loader").loader(path.join(__dirname, "./md-loader/index.js")).end();},// css: {//   extract: {//     // filename: "theme-chalk.css",//     // chunkFilename: "theme-chalk.[id].[contenthash].css",//   },//   // extract: true,// },configureWebpack: {resolve: {alias: {"@": path.resolve(__dirname, "examples"),},},output: {libraryExport: "default",},plugins: [new MiniCssExtractPlugin({filename: "theme-chalk.css",}),],},
});

3.之后要设置下package.json

{"name": "", //这里是项目名称,要上传npm的话,不能和npm上已有的项目同名"version": "0.1.2", // 版本号,每次上传npm,版本号不能一样"private": false, // 是否私有,上传npm要开发为false"main": "", // lib打包后的路径"files": ["dist" // 发布时,包含的文件],"author": {"name": "" // 作者},"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","build:theme": "vue-cli-service build --target lib --name theme-chalk --entry packages/theme-chalk theme-chalk/index.scss","lib": "vue-cli-service build --target lib packages/index.js" // lib打包只需要打包组件部分的代码,packages/index.js为组件部分的总入口},
......
......
}

4.npm run lib打包后,生成dist包

5.创建npm账户:访问 https://www.npmjs.com/signup 注册一个npm账户。

6.登录npm账户:在你的项目的命令行或终端中运行  npm login  命令 ,然后输入你的用户名、密码和电子邮件地址。

7.发布项目:在你的命令行或终端中,确保你处于项目的根目录,然后运行 npm publish 命令,将你的项目发布到npm仓库。

8.等待发布完成:如果一切顺利,你的项目将被上传到npm仓库,你应该能在你的npm账户的“已发布的包”部分看到它。

注意:在发布之前,请确保你的代码已经经过充分的测试,并遵循了发布开源软件的最佳实践。发布后,你可以使用npm version命令更新你的项目版本,并使用npm publish命令发布新版本。

查看npm包总下载量

使用npm-stat.com网站:

打开浏览器,访问 https://npm-stat.com/在页面上输入你想查询下载量的npm包名指定日期范围,可以查看该报告的下载数。

使用命令行工具npm包:npm-download-counts

  1. 首先确保你已经安装了Node.js和npm
  2. 打开终端或命令提示符,运行以下命令安装全局工具:

    npm install -g npm-download-counts

  3. 输入以下命令以查看特定npm包的总下载量(替换your-package-name为您要查询的包名):

    npm-download-counts -p your-package-name --total

  4. 等待结果显示在控制台中。

请注意,在使用这些方法查询下载量时,下载量可能略有不同,但总体上应该比较接近。总之,这就是如何查询npm包的总下载量。

上一篇:教你制作自己vue的组件库(仿ElementUI)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kubernetes 容器类型 Init - pause - sidecar - app容器

目录 Kubernetes 的容器类型 Init 初始化容器 参考文档:Init 容器 | Kubernetes 使用 Init 容器的情况 案例:定义了一个具有 2 个 Init 容器的简单 Pod 你通过运行下面的命令启动 Pod: 发现两个Init容器都没有运行成功 查看更多详细…

Mycat【什么是Mycat、Mycat与其他中间件区别、Mycat应用场景、核心概念详解、Mycat原理】(一)-全面详解(学习总结---从入门到深化)

目录 Mycat概述_什么是Mycat Mycat概述_Mycat与其他中间件区别 Mycat概述_Mycat应用场景 Mycat概念_核心概念详解 Mycat概述_Mycat原理 Mycat部署安装_MySQL主从复制概述 Mycat概述_什么是Mycat 什么是Mycat Mycat是数据库中间件,所谓中间件数据库中间件是连…

Oracle语句优化 (汇总)

大部分写sql语句都是为了实现而实现,如果最后在投入使用的过程中没有很难接受的性能,基本不怎么去考虑其性能。最近刚好有点时间,对优化方面进修进修,以备不时之需。 选择最有效率的表名顺序 Oracle的解析器按照从右到左的顺序处…

欧姆龙以太网口怎么和电脑连接

捷米特JM-ETH-CP以太网通讯处理器用于欧姆龙 CP1L/ CP1E/ CP1H 系列 PLC 的以太网数据采集,捷米特JM-ETH-CP以太网模块不占用 PLC 通讯口,即编程软件/上位机软件通过以太网对 PLC 数据监控的同时,触摸屏可以通过复用接口与 PLC 进行通讯。支持…

MyBatis查询数据库(1)

前言🍭 ❤️❤️❤️SSM专栏更新中,各位大佬觉得写得不错,支持一下,感谢了!❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 经过前⾯的学习咱们 Spring 系列的基本操作已经实现的差不多了&#xff0…

光伏5G多合一融合终端|光伏多合一融合终端|光伏多合一群调群控网关|分布式光伏群控群调|光伏AGC/AVC系统这几者之间什么技术关系,多少钱一套预算?

光伏5G多合一融合终端|光伏多合一融合终端|光伏多合一群调群控网关|分布式光伏群控群调|光伏AGC/AVC系统这几者之间什么技术关系,多少钱一套预算? 一:光伏5G多合一融合终端的功能 光伏5G多合一融合终端的功能:群调群控/AGC/AVC功…

【数据结构与算法】栈算法题

TS 实现栈 interface IStack<T> {push(e: T): void;pop(): T | undefined;peek(): T;isEmpyt(): boolean;size(): number; }// implements: 实现接口, 一个类可以实现多个接口 class ArrayStack<T> implements IStack<T> {private data: T[] []; // private…

Spring详解(学习总结)

目录 一、Spring概述 &#xff08;一&#xff09;、Spring是什么&#xff1f; &#xff08;二&#xff09;、Spring框架发展历程 &#xff08;三&#xff09;、Spring框架的优势 &#xff08;四&#xff09;、Spring的体系结构 二、程序耦合与解耦合 &#xff08;一&…

在Windows server 2012上使用virtualBox运行CentOS7虚拟机,被强制暂停

文章目录 问题场景排查过程处理解决事后反思 问题场景 我们的平台服务使用docker部署&#xff0c;使用docker-compose进行管理&#xff0c;部署到CentOS7的服务器里平台部署到客户环境时&#xff0c;一小部分客户&#xff0c;使用自己机房或单独的服务器。很多客户不愿意采购新…

【嵌入式Linux项目】基于Linux的全志H616开发板智能垃圾桶项目

目录 一、功能需求 二、涵盖的知识点 1、wiringPi库下的相关硬件操作函数调用 2、线程&#xff08;未使用互斥锁和条件&#xff09; 3、父子进程 4、网络编程&#xff08;socket套接字&#xff09; 5、进程间通信&#xff08;共享内存和信号量&#xff09; 三、开发环境…

Elasticsearch原理剖析

一、 Elasticsearch结构 Elasticsearch集群方案由EsMaster、EsClient和EsNode1、EsNode2、EsNode3、EsNode4、EsNode5、EsNode6、EsNode7、EsNode8、EsNode9进程组成&#xff0c;如下图所示&#xff0c;模块说明如表下所示。 说明如表&#xff1a; 名称说明ClientClient使用H…

OpenCV 入门教程:颜色空间转换

OpenCV 入门教程&#xff1a;颜色空间转换 导语一、颜色空间的基本概念1.1 RGB颜色空间1.2 灰度颜色空间1.3 其他颜色空间 二、颜色空间转换三、示例应用3.1 提取图像的色彩通道3.2 调整图像的亮度和对比度 总结 导语 在图像处理和计算机视觉领域&#xff0c;颜色空间转换是一…