带您打包vue组件第三方库

为什么选择自己封装第三方库

最近几个月，我公司用vue重构了前两三年的所有业务，前台使用vue ssr，后台使用vue element。在这个过程中，许多vue组件被我们自己封装和编写。实际上，vue编写组件非常简单方便。github上很多vue组件只是打包一些jquery或者原生js插件，但我个人不喜欢使用这些第三方包。原因如下：

很多第三方包装的组件参数配置项实际上是有缺陷的。例如，一些富文本或图表组件的配置项比您想象的要多得多，第三方打包组件很难覆盖所有配置。第三方组件的更新频率难以保证。许多第三方封装的组件无法始终与原始组件保持同步。如果原来的组件更新了你需要的某个功能，第三方不更新，岂不是很尴尬？此外，许多第三方组件在维护一段时间后将不会得到维护。灵活性和针对性。不过，文赋最初表示，文赋在我们公司有很多定制需求。我们需要上传图片，水印图片，需要很多特殊的业务需求。使用第三方封装的组件不合适，第三方封装的组件很难扩展。所以我觉得大部分组件自己封装更方便更灵活。

开始

接下来，让我们教一下如何转换和打包一个js插件，打包一个属于你的vue组件只需要几分钟。包对象：countUp.js，转换后的结果是vue-countTo。

首先，我们使用官方的vue-cli来构建项目。这里我们选择webpack-simple(组件相对简单，不需要很多复杂的功能，所以webpack-simple已经满足要求)

$ npminstall-gvue-CLI $ vueinit web pack-simple my-project $ cdmy-project $ npminstall安装countup.js

$ npminstall countup.js $ npmrundev在启动项目后根据countup . js的官方演示初始化插件

app.vue

template span ref=' count up '/span/template script import count up from ' count up . js ' export default { name : ' count up-demo '，data(){ return { numanim : null } }，mounted(){ this.initCountUp() }，methods : { initcount up(){ this . numanim=new count up(this。$refs.countup，0，2017)this . numanim . start()；} }}/script刷新页面。就这么简单。countUp.js已经生效。

接下来，查看countUp.js的github，发现它定义了以下可配置参数

对应的vue是道具，类型和初始化一目了然。

prop : { start : { type: Number，default: 0 }，end: { type: Number，default: 2017 }，decimal: { type: Number，Default : 0 0 }，持续时间： { type : Number，default : 2.5}，选项： { type : object } }。

这个。numanim=newcountup (this。参考文献。数一数，这个。开始吧，这个。结束，这个。十进制，这个。持续时间，这个。选项)使用组件

vue-count-up : end=' 2500 ' : duration=' 2.5 '/vue-count-up，一个原生组件打包只需要几分钟，就这么简单。完整演示

这个时候，如果你觉得用countUp.js还是不能满足你的需求，可以选择自己造轮子。

制造轮子

首先，当然是阅读源代码

事实上，源代码只是核心代码的两部分

第一部分：主要是requestAnimationFrame，在查看器不支持requestAnimationFrame时由setTimeout模拟。这段代码值得仔细阅读，可以在普通项目中借鉴。

第二部分是计数功能

了解了这两个部分之后，构建轮子就变得非常简单了

造轮过程中发现CountUp，没有参数项自动播放可以让组件自动开始计数，所以无所谓。我们可以自己做。我们首先将自动播放定义为布尔值，默认情况下所有组件自动播放为真

prop : { autoplay : { type : boolean，required: false，default3360 true}}一旦定义了道具，只需在挂载的生命周期中添加一个判断即可。

mounted(){ if(this . autoplay){ this . start()；}}我们的countUp组件可以自动计数！

上传npm

我们之前做的已经满足了需求，没有跨项目。但我们不能满足于此。我希望世界上有更多的人使用我的插件。是时候上传npm演示了。

首先，让我们创建一个新的索引

如果(窗口类型！==' undefined ' window . vue){ window . vue.component(' count-to '，count to)}同时我们还需要修改webpack的配置，因为并不是所有使用你的组件的人都是通过npm安装导入的。

还有很多人是通过脚本标签直接介绍的，所以我们必须将libraryTarget改为umd格式

库：“计数到”，库目标：“UMD”，umdnameddefine:真已完成。现在，把它发布到npm。首先，注册一个npm帐户。

之后配置自己的package.json(注意填写版本，每次发布的版本不能相同；Main是入口文件地址)。

之后，您的项目将通过npm发布的一行命令发送到npm。让你的朋友一起使用你的vue组件！

摘要

这里有一个非常简单的countUp组件的简单例子。有时候自己吃饱穿暖，很多插件的包装比想象的要简单很多。产品经理再也看不到我难过了，因为这个fu**插件不支持这个功能。我们可以更好地满足产品~ ~完整的项目地址：欢迎来到https://github.com/PanJiaChen/vue-countTo之星

完整项目地址：vue-element-admin

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。