如何开发和发布一个Vue插件
前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router 、 vuex ,还有 element-ui 提供的 notify 、 message 等等。这些插件让我们的开发变得更简单更高效。那么 Vue 插件是怎么开发的呢?如何自己开发一个 Vue 插件然后打包发布到npm? 本文涉及技术点: Vue 插件的本质 Vue.extend() 全局方法 如何手动挂载 Vue 实例 Vue.use() 的原理 如何打包成 umd 格式 发布前如何测试 npm 包 一、定义 什么是Vue插件,它和Vue组件有什么区别?来看一下官网的解释: “插件通常用来为 Vue 添加全局功能。” “组件是可复用的 Vue 实例,且带有一个名字。” —— Vue.js 官网 Emmmm,似乎好像有种朦胧美。。。 我来尝试解释一下,其实, Vue 插件 和 Vue组件 只是在 Vue.js 中包装的两个概念而已,不管是插件还是组件,最终目的都是为了实现逻辑复用。它们的本质都是对代码逻辑的封装,只是封装方式不同而已。在必要时,组件也可以封装成插件,插件也可以改写成组件,就看实际哪种封装更方便使用了。 除此之外,插件是全局的,组件可以全局注册也可以局部注册。 我们今天只聚焦 Vue 插件。 插件一般有下面几种: 添加全局方法或者属性。如: vue-custom-element 添加全局资源