Vue 插件开发 NPM 发布及使用

最新推荐文章于 2024-06-20 17:01:04 发布
最新推荐文章于 2024-06-20 17:01:04 发布
阅读量194 收藏
点赞数
分类专栏： VUE 前端工具 NPM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzhizhuo/article/details/97185246
版权
VUE 同时被 3 个专栏收录
17 篇文章 18 订阅
订阅专栏
前端工具
7 篇文章 0 订阅
订阅专栏
NPM
1 篇文章 0 订阅
订阅专栏

                                          Vue 插件开发 NPM 发布及使用

我们在日常开发过程中，一些通用的组件希望封装并发布到NPM等场景供大家使用。 提高复用及开发效率。

本文章主要想给大家介绍一个常规的Vue 插件（这里已一个分页插件为例）开发， npm 发布， 下载安装及使用流程。 具体细节不在文字描述，大家可直接到githib 上看源码及备注。 写的比较详细，遇到的问题也一并总结写在README.md 中。 

这里代码存管放在 基于Git的码云Gitee上：   PagesPlugin(GitHub)

NPM插件地址： https://www.npmjs.com/package/pages-plugin?activeTab=readme

 

来一个v1.0.0 插图：

插件会继续升级完善, 欢迎大家给出问题意见

 

 

 

 

自定义Vue组件打包、发布到npm及使用教程
10-16
在将自定义Vue组件发布到npm之前，需要在项目中创建一个入口配置文件，这个文件会指定哪些组件被包含在发布的npm包中。然后，需要对webpack.config.js进行配置，设置正确的入口(entry)和出口(output)路径。示例如下...
vue2.0+ 从插件开发到npm发布的示例代码
08-27
Vue 2.0+ 插件开发到npm发布的流程涵盖了从创建项目、编写插件代码、测试、打包到发布到npm仓库的整个过程。这里我们将详细介绍每个步骤。 1. **初始化项目** 使用`vue init webpack-simple vue-pay-keyboard`命令...
如何开发一个npm插件，并发布到npm官网
xyphf的博客
12-06 5317
www.npmjs.com 创建一个vue-toast-demo目录 进入目录 cd vue-toast-demo npm初始化  npm init package name: (vue-toast-demo)  // 插件名 version: (1.0.0)                // 插件版本 description: a toast plugin for mobile // ...
Vue配置开发环境 npm+webpack
羽下佳人的博客
01-27 6695
①安装node.js ②按照下面命令行执行 node安装参照网址：https://www.cnblogs.com/pearl07/p/6247389.html webpack讲解+安装+打包：https://segmentfault.com/a/1190000004690338 cmd安装慢，安装淘宝镜像：npm install -g cnpm --registry=...
vue 插件的封装
qq：489366879
12-25 741
一.插件 插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种： 1.添加全局方法或者属性，如:vue-custom-element 2.添加全局资源：指令/过滤器/过渡等，如vue-touch 3.通过全局 mixin 方法添加一些组件选项，如:vue-router 4.添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。 5.一个...
vue npm 发布自己的组件到npm并使用
wodebokecsdn的博客
12-22 1670
我们的目标是写一个组件上传到npm，然后可以通过cnpm install --save kyswitch 的方式去依赖这个组件，像element-ui一样的去使用 import kyswitch from "kyswitch" import "kyswitch/lib/kyui.css" Vue.use(kyswitch); //页面 <ky-switch></ky-switch> OK 开始吧！ 1、首先创建一个vue项目，我用的是脚手架vuecli4.0 创建完.
Vue2开发插件并发布到npm
Mr Dear的博客
02-22 2428
Vue2开发vue-amazing-selector下拉框组件，并发布到npm
手把手教你npm发布一个vue插件
gongliming_qd的博客
02-15 1676
效果 1. 安装vue脚手架 选择最基础的即可 vue create 项目名字 2. 整理文件 删除src文件， 新增packages文件，同时建议把eslint关闭 完整结构如下 ├── packages │ ├── index.js # 入口文件 │ ├── components # 组件 │ │ ├── index.vue # 本文需要封装的组件 ├── README.md ├── package-lock.json ├── package.json └──vue.config.js #
开发npm包，vue插件形式发布
yuan_618859的博客
11-15 772
熟悉vue2.0开发的网友，只需要看看这个源码，运行起来，然后直接发布即可， 其他插件的发布道理一样。 如果你还不熟悉vue2.0的开发，建议先不要看这个。 npm包vue插件源码 源码下载好后，依次运行下面语句即可 npm i // 安装依赖 npm run build // 打包 npm publish // 发布到npm平台上 如有不懂，可留言评论私信。 ...
自定义vue组件发布npm仓库
最新发布
qq_43432157的博客
06-20 1167
自定义vue组件发布npm仓库
npm发布Vue组件
qq_15509267的博客
01-31 1265
本文主要介绍如何把一个vue组件通过vite编译发布到NPM平台。
Vue组件化开发(npm安装使用)
YUMIAloogy的博客~
06-06 905
Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。本文主要介绍了npm的下载和vue项目的基本架构
快速开发一个vue插件库并发布到npm
08-12
"快速开发一个vue插件库并发布到npm"这个主题涵盖了Vue组件库的创建过程，以及如何将它部署到npm仓库。以下是关于这个主题的详细讲解。 1. **Vue组件库的基础知识** - Vue组件是Vue.js的核心特性，允许开发者将UI...
用vue封装插件并发布到npm的方法步骤
08-29
使用 Vue 封装插件并发布到 npm 的方法步骤 使用 Vue 封装插件并发布到 npm 需要经过多个步骤，包括初始化组件、实现功能、添加 index.js、修改配置文件等。下面将详细介绍每个步骤的实现过程。 一、初始化组件 ...
Vue 原理解析（五）之 虚拟Dom 到真实Dom的转换过程
热门推荐
绿足 博客
09-24 1万+
上一篇 vue 原理解析(四)： 虚拟Dom 是怎么生成的 再有一颗树形结构的Javascript对象后， 我们需要做的就是讲这棵树跟真实Dom树形成映射关系。我们先回顾之前的mountComponnet 方法： export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount') ...
Vue 原理解析（二）：初始化时beforeCreate之前做了什么
绿足 博客
09-22 8632
上一篇： Vue原理解析（一） Vue到底是什么 上一章我们知道在 new Vue() 时， 内部会执行一个this._init() 方法， 这个方法是在initMixin(Vue) 内定义的： export function initMixin(Vue) { Vue.prototype._init = function(options) { ... } } 当执行new ...
Vue 原理解析（九）之 computed 和watch 原理
绿足 博客
09-28 5900
上一篇： Vue 原理解析（八） 之 diff 算法 之前的章节， 我们按照流程介绍了vue的初始化， 虚拟Dom生成， 虚拟Dom转为真实Dom, 深入理解响应式以及diff 算法等这些核心概念。 对它内部的实现做了分析， 这些首饰篇底层的原理。 下面我们将介绍日常开发中经常使用的API的原理， 进一步丰富vue 的认识， 主要包括如下API： 响应式相关API： this.watch,t...
Vue 原理解析(四)： 虚拟Dom是怎么生成的
绿足 博客
09-23 3568
在经过初始化阶段之后，即将开始组件的挂载，在挂载之前有必要了解下虚拟Dom 的概念。我们知道vue@2.0 开始引入了虚拟dom， 主要解决的问题是， 大部分情况下可以降低使用Javascript 去操作跨线程的庞大dom所需要的昂贵性能，让dom 操作的性能更高效； 以及虚拟Dom可以用于SSR以及跨端使用。 虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真...
vue 原理解析（三）：初始化时created之前做了什么
绿足 博客
09-22 3324
上一篇 Vue解析原理（二）： 初始化时beforeCreate之前做了什么？ 我们继续this._init() 的初始化相关操作， 接着又会执行如下三个初始化方法： initInjections(vm) initState(vm) initProvide(vm) 5. initInjections(vm): 主要作用是初始化inject, 可以访问到对应的依赖。 inject 和 prov...
Vue2.0+插件开发到npm发布全程指南
"这篇教程详细介绍了如何在Vue 2.5.11版本下开发一个插件并将其发布到npm。...通过以上步骤，你不仅可以学习到Vue插件的开发，还能了解npm包的发布流程，这对于提高你的前端开发技能和分享代码库是非常有价值的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值