npm 发布自己的组件库
npm 发布组件库步骤
第一步:注册 npm 账号
第二步:编写自己的组件库
第三部:编写 package.json
- 可以通过命令生成
npm init
{
"name": "要发布 组件库的名字",
"version": "版本号:每次发布版本好都需要更新",
"description": "组件库 简介",
"keywords": [搜索关键词],
"main": "lib/mylib.umd.ts", // 文件入口
"module": "lib/mylib.js",
"exports": { // 引入包的方式
".": {
"import": "./lib/mylib.js"
},
"./*": "./*"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "关联组件库 git 地址"
},
"peerDependencies": {
"vue": "^3.2.0"
},
"publish": true,
"dependencies": {
"element-plus": "^2.6.3"
}
}
第四步:编写组件库并打包
第五步:发布
npm adduser --registry=https://registry.npmjs.org/ 要发布的源地址
// 根据提示输入 账号- 密码 - 邮箱 等相关信息
npm publish --registry=https://registry.npmjs.org/ 发布到 npm
// 发布成功后可以通过 npm search 查看是否已更新 (发布成功后可能会存在延迟更新)
npm search 你的包名
npm install 你的包名@最新版本好即可下载最新包
npm 发布自己的组件库的更多相关文章
- 将 Vue 组件库发布到 npm
制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...
- [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库
使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- 前端如何搭建vue UI组件库/封装插件(从零到有)
需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...
- 使用npm发布、查看、引用、删除自己的包[小白推荐]
前言 怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一 ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- 创建一个自己的Vue UI组件库,并将它发布在npm上
本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...
- 在npm上发布自己的vue组件库(使用npm install 或者 CDN的方式引用)
一.npm publish发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm i ...
- 从零开始封装React UI 组件库并发布到NPM
github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package ...
- 发布自己的npm组件库
发布自己的npm组件库 前期准备 **git上建立自己的仓库,这样子是为了在本地初始化时,可以直接生成对应的 package.json ** 克隆仓库 创建仓库成功后,gitbush本地,执行 git ...
随机推荐
- Nacos 2.0 性能提升十倍,贡献者 80% 以上来自阿里之外
简介: 3 月 20 日,Nacos 2.0 正式发布.Nacos 是阿里巴巴在 2018 年开源的一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台,也可以理解为微服务的注册中心 + 配 ...
- 前沿分享|阿里云数据库资深技术专家 姚奕玮:AnalyticDB MySQL离在线一体化技术揭秘
简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云数据库资深技术专家 姚奕玮关于"AnalyticDB MySQL离在线一体化技术揭秘&q ...
- [FAQ] GoLand 需要手动开启代码补全吗 ?
使用 go mod download 下载模块到本地缓存中,之后 GoLand 就会根据输入自动代码提示. Other:[FAQ] Goland 始终没有包代码的提示 Link:https://www ...
- 2019-11-29-WPF-Process.Start-出现-Win32Exception-异常
title author date CreateTime categories WPF Process.Start 出现 Win32Exception 异常 lindexi 2019-11-29 10 ...
- 【爬虫+情感判定+Top10高频词+词云图】"乌克兰"油管热评python舆情分析
目录 一.分析背景 二.整体思路 三.代码讲解 3.1 爬虫采集 3.2 情感判定 3.3 Top10高频词 3.4 词云图 四.得出结论 五.同步视频演示 六.附完整源码 一.分析背景 乌克兰局势这 ...
- oracle RDBMS Kernel Executable 占用内存过高
oracle RDBMS Kernel Executable 占用内存过高 参考:https://www.cnblogs.com/markkang/archive/2019/11/25/1192540 ...
- blocks (单调栈)
题目描述 解析 对于这道题,他要求大于k的数进行操作,所以直接让每个数减k,然后用前缀和维护一下与0比较就可以了,因为一段区间和的平 均值大于k的话,那么这就是一个合法区间,即为操作后的这个区间和大于 ...
- ECMAScript 语言规范每年都会进行一次更新,而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前,ECMAScript 2024 的候选版本已经发布,为我们带来了一系列实用的新功能。
Promise.withResolvers 使用 Promise.withResolvers() 关键的区别在于解决和拒绝函数现在与 Promise 本身处于同一作用域,而不是在执行器中被创建和一次性 ...
- 使用systemctl管理服务(nginx)
首先调整好路径信息,修改配置文件vim /usr/lib/systemd/system/nginx.service [Unit]Description=The nginx HTTP and rever ...
- 如何利用 Seaborn 实现高级统计图表
本文分享自华为云社区<使用 Seaborn 实现高级统计图表从箱线图到多变量关系探索> ,作者:柠檬味拥抱. 在数据科学和数据可视化领域,Seaborn 是一个备受欢迎的 Python 可 ...