基于 vue2 发布 npm包

背景:组件化开发需要,走了一遍发布npm包的过程,采用很简单的模式实现包的发布流程,记录如下。

项目参考:基于vue的时间播放器组件,并发布到npm_timeplay.js_xmy_wh的博客-CSDN博客

1、项目初始化

首先,要创建项目,封装vue的插件要写的是一个简单的vue组件不需要依赖那么多而庞大的配置,所以,这里用简单版本的webapck配置模板:

vue init webpack-simple my-project

然后在在src下创建一个lib文件夹包含index.js和vue-time-play.vue目录结构如下

在index.js中将组件作为vue插件导出

import vueTimePlay from './vue-time-play' // 导入组件
const timePlay = {install (Vue, options) {Vue.component(vueTimePlay.name, vueTimePlay)  // vueTimePlay.name 组件的name属性}
}
export default timePlay // 导出..

 在main.js中引入

import vueTimePlay from './lib/index.js'
Vue.use(vueTimePlay)

2、开发组件

在vue-time-play.vue中编写组件 此组件是基本vue的时间播放器,主要功能是可以按天或者时间播放来切换,并且可以配置速度来切换播放速度。 此处省略 vue-time-play.vue中的代码,请移步到结尾的源码链接查看。

3、修改配置项

修改 webpack.config.js

// 执行环境const NODE_ENV = process.env.NODE_ENV;module.exports = {// 根据不同的执行环境配置不同的入口entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'vue-time-play.js',library: 'vue-time-play', // 指定的就是你使用require时的模块名libraryTarget: 'umd', // 指定输出格式umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define}

然后npm run build

修改 package.json 文件:

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 当import vueTimePlay from vue-time-play 的时候引入的包
"main": "dist/vue-time-play.js",

查看.npmignore文件,不要忘记把dist文件提交上去

4、发布

4.1  注册npm账号:地址=>npm,按照提示一路走下去即可注册成功。

4.2 注册成功之后,需要在命令行登陆:

npm login

4.3 需要输入账号,密码以及邮箱验证码等,按照提示操作即可。

4.4 发布npm包 

npm publish

发不成功后邮箱会收到通知,并且也可以去npm上查看已经发布成功的包,至此,已经完成一个组件的发布啦。

注意:每次npm publish时需要更改版本号,package.json里的version字段。

5、使用自己的组件

  • 执行命令 

    npm install vue-time-play --save

6、使用过程中注意查看镜像等,可以使用nrm,常用命令:

1.npm install -g nrm   //全局安装
2.nrm use npm    //切换到npm,选中会有选中的状态提示
3.nrm use taobao //切回淘宝镜像

以上是使用vue简单发布一个组件到npm的过程,目前存在一些静态资源找不到的问题,后续解决了更新。

结束

感谢您的阅读。

项目源码 & 文档

欢迎大家安装使用,有任何问题大家可以留言相互交流。

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

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

相关文章

基于React实现日历组件详细教程

前言 日历组件是常见的日期时间相关的组件,围绕日历组件设计师做出过各种尝试,展示的形式也是五花八门。但是对于前端开发者来讲,主要我们能够掌握核心思路,不管多么奇葩的设计我们都能够把它做出来。 本文将详细分析如何渲染一…

【LeetCode】227. 基本计算器 II

227. 基本计算器 II(中等) 方法:双栈解法 思路 我们可以使用两个栈 nums 和 ops 。 nums : 存放所有的数字ops :存放所有的数字以外的操作 然后从前往后做,对遍历到的字符做分情况讨论: 空格 …

springboot 基于JAVA的动漫周边商城的设计与实现64n21

动漫周边商城分为二个模块,分别是管理员功能模块和用户功能模块。管理员功能模块包括:文章资讯、文章类型、动漫活动、动漫商品功能,用户功能模块包括:文章资讯、动漫活动、动漫商品、购物车,传统的管理方式对时间、地…

2023-08-28 LeetCode每日一题(插入区间)

2023-08-28每日一题 一、题目编号 57. 插入区间二、题目链接 点击跳转到题目位置 三、题目描述 给你一个 无重叠的 ,按照区间起始端点排序的区间列表。 在列表中插入一个新的区间,你需要确保列表中的区间仍然有序且不重叠(如果有必要的…

暴力递归转动态规划(二)

上一篇已经简单的介绍了暴力递归如何转动态规划,如果在暴力递归的过程中发现子过程中有重复解的情况,则证明这个暴力递归可以转化成动态规划。 这篇帖子会继续暴力递归转化动态规划的练习,这道题有点难度。 题目 给定一个整型数组arr[]&…

element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题

当我们在 element-ui 中使用弹窗嵌套弹窗时,会出现第二个弹窗打开时被一个遮罩层挡着,就像下面这样: 下面提供两种解决方案 : 一、第一种方案 我们查询element-ui 官网可以发现 el-dialog 有这样几个属性: 具体使用就…

hadoop 学习:mapreduce 入门案例三:顾客信息与订单信息相关联(联表)

这里的知识点在于如何合并两张表,事实上这种业务场景我们很熟悉了,这就是我们在学习 MySQL 的时候接触到的内连接,左连接,而现在我们要学习 mapreduce 中的做法 这里我们可以选择在 map 阶段和reduce阶段去做 数据: …

java版工程项目管理系统源码+系统管理+系统设置+项目管理+合同管理+二次开发

工程项目各模块及其功能点清单 一、系统管理 1、数据字典:实现对数据字典标签的增删改查操作 2、编码管理:实现对系统编码的增删改查操作 3、用户管理:管理和查看用户角色 4、菜单管理:实现对系统菜单的增删改查操…

人工智能会成为人类的威胁吗?马斯克、扎克伯格、比尔·盖茨出席

根据消息人士透露,此次人工智能洞察论坛将是一次历史性的聚会,吸引了来自科技界的许多重量级人物。与会者们将共同探讨人工智能在科技行业和社会发展中的巨大潜力以及可能带来的挑战。 埃隆马斯克,特斯拉和SpaceX的首席执行官,一直…

如何提高视频清晰度?视频调整清晰度操作方法

现在很多小伙伴通过制作短视频发布到一些短视频平台上记录生活,分享趣事。但制作的视频有些比较模糊,做视频的小伙伴应该都知道,视频画质模糊不清,会严重影响观众的观看体验。 通过研究,总结了以下几点严重影响的点 …

Android12之ABuffer数据处理(三十四)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…

Nacos集群搭建

集群结构 三个nacos节点的地址: 节点ipportnacos1127.0.0.18845nacos2127.0.0.18846nacos3127.0.0.18847 集群步骤 搭建集群的基本步骤: 搭建数据库,初始化数据库表结构 下载nacos安装包 配置nacos 启动nacos集群 nginx反向代理 初始化…

02调制+滤波器+冲激函数的傅立叶变换

目录 一、调制方式 1.1 什么是调制? 1.2 为什么要调制? 1.3 如何调制? 1.4 调制包含的信号类型? 1. 消息信号 2. 载波信号 3. 调制信号 1.5 调制类型? 1. 调幅 2. 调频 3. 调相 4. 模拟脉冲调制 5. 脉冲…

WSL Opencv with_ffmpeg conan1.60.0

我是ubuntu18. self.options[“opencv”].with_ffmpeg True 关键是gcc版本需要conan支持,比如我的是: compilergcc compiler.version7.5 此外还需要安装系统所需库: https://qq742971636.blog.csdn.net/article/details/132559789 甚至来…

C# NetTopologySuite+ProjNet 任意图形类型坐标转换

添加引用:NetTopologySuite、ProjNet、ProjNet.SRID Program.cs文件: using ProjNet.CoordinateSystems; using ProjNet.CoordinateSystems.Transformations; using ProjNet.SRID; using System; using System.Collections.Generic; using System.Linq;…

unordered-------Hash

✅<1>主页&#xff1a;我的代码爱吃辣&#x1f4c3;<2>知识讲解&#xff1a;数据结构——哈希表☂️<3>开发环境&#xff1a;Visual Studio 2022&#x1f4ac;<4>前言&#xff1a;哈希是一种映射的思想&#xff0c;哈希表即使利用这种思想&#xff0c;…

前端基础1——HTML标记语言

文章目录 一、基本了解二、HTML常用标签2.1 文本格式化标签2.2 列表标签2.3 超链接标签2.4 图片标签2.5 表格标签2.6 表单标签2.6.1 提交表单2.6.2 下拉表单2.6.3 按钮标签 2.7 布局标签 一、基本了解 网页组成&#xff08;index.html页面&#xff09;&#xff1a; HTML标记语言…

Verilog开源项目——百兆以太网交换机(一)架构设计与Feature定义

Verilog开源项目——百兆以太网交换机&#xff08;一&#xff09;架构设计与Feature定义 &#x1f508;声明&#xff1a;未经作者允许&#xff0c;禁止转载 &#x1f603;博主主页&#xff1a;王_嘻嘻的CSDN主页 &#x1f511;全新原创以太网交换机项目&#xff0c;Blog内容将聚…

23.8.11.用apifox端口号与java接口链接的时候少了个/导致连接不成功。

用apifox端口号与java接口链接的时候少了个/导致连接不成功。 原因分析&#xff0c;因为拼接的位置少了个/ 如图所示

【Java转Go】快速上手学习笔记(六)之网络编程篇一

目录 TCP一个简单案例server.go 服务端client.go 客户端 HTTPserver.go 服务端client.go 客户端 RPC一个很简单的示例server.go 服务端client.go 客户端 WebSocketserver.go 服务端client.go 客户端 完整代码server.go 服务端client.go 客户端 go往期文章笔记&#xff1a; 【J…