# 进度

https://github.com/dream2023/vue-ele-form-generator http://mint-ui.github.io/#!/zh-cn

codeMirror是代码展示格式的插件

经过多方调研,我们决定用survey.js来当我的们组件工具,通过更新和维护以及运营模式来分析出来的。

移动端用的是uni-app/wepy/原生小程序,我们还在调研阶段,并没有真正使用。

# 2019-10-24日diary

# 为什么封装第三方库

  1. 很多第三方封装的组件参数配置项是不能完美契合需求的。 如一些富文本或者图表组件,配置项远比你想想中的多,第三方封装组件很难覆盖所有配置。
  2. 第三方组件的更新频率很难保证。很多第三方封装组件并不能一直和原始组件保持同步更新,有时候原始组件更新了某个你需要的功能,但是第三方并没有更新,而且很多第三方组件维护一段时间后不再维护。
  3. 录活性和针对性。比如对富文本会有一些定制化需求。如,将图片上传到七牛,需要给图片打水印,针对不同业务满足不同的需求,使用第三方包装的组件是不完全合适的,基于第三方封装的组件是很难扩展的。
  4. 自己封装的组件,会更灵活一些

# 如果实现第三方库的封装

首先我们用官方提供的vue-cli来构建项目,这里选择了 webpack-simple(组件相对比较简单,不需要复杂的功能,所以用了webpack-simple就满足需求)

我们先选择一个比较简单的库来进行学习。不能一口吃个大胖子。

安装 countup.js

启动项目之后按照countup.js官方demo初始化插件

App.vue

<template>
  <div id="app">
    <span ref='countup'></span>
  </div>
</template>

<script>
  import { CountUp } from 'countup.js';

export default {
  name: 'count-to',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      numAnim: null,
    }
  },
  props: {
    start: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 2.5
    }
  },
  mounted () {
    this.initCountUp()
  },
  methods:{
    initCountUp(){
      const countUp = new CountUp(this.$refs.countup,80000,{
        startVal: this.start,
        duration: this.duration,
      })
      if (!countUp.error) {
        countUp.start();
      } else {
        console.error(countUp.error);
      }
    }
  }
}
</script>
<style>

</style>

此时刷新页面,发现countUp.js已经生效了

回过头来我们再看看countup.js的配置项

其中Options(defaults in parentheses);

我们可以将props按文档进行初始化

然后将之前写死的配置项替换成props就可以了。

# 使用组件

# 开始改造轮子

首先当然是阅读源码了

其实源码也就两部分核心代码

第一部分:主要是就是 requestAnimationFrame,在游览器不支持requestAnimationFrame 的情况下使用 setTimeout 来模拟,这段代码值得仔细阅读,自己在平时的项目中也能借鉴使用这段代码。

第二部分:就是 count 函数

看懂这两部分之后造轮子就相当的简单了, demo

造轮子过程中发现 countUp,并没有 autoplay 这个参数项可以让组件自动开始count,没关系。。。我们可以自己来撸,我们首先定义 autoplay 这个props为布尔值,默认所有组件 autoplay 为 true

定义好 props 之后只要在 mounted 生命周期内加一个判断就完事了。

我们的 countUp 组件可以自动 count 了!

# 上传npm

在不跨项目的情况下之前所做的已经满足需求了。但我们不能就此满足,我想让世界上更多的人来使用我的插件,这时候就要上传 npm了 demo 。

首先我们新建一个index.js

同时我们也要改造一下 webpack 的配置,因为不是所有使用你组件的人都是通过 npm 安装使用 import 引入组件的的。

还有很多人是通过 <script> 标签的方式直接引入的,所以我们要将 libraryTarget 改为 umd 格式

下面的配置在output中

大功告成,现在只要将它发布到 npm 就可以了,首先注册一个npm 账号, 之后配置自己的 package.json (注意填写 version,每次发布的 version 不能相同;main 为入口文件地址)。 之后只要一行命令 npm publish 你的项目就发到 npm 了,快让小伙伴们一起来用你的vue component 吧!

TIP

main的入口是一定要写的,不然上传后找不到目录src下面的入口

# 如何进行测试呀?

如果没有现成的项目重复上面vue-cli生成项目的步骤,生成新的项目

这样就可以像平时用的组件一样用了。

注意事件

引用包时候因为npm配置的时候是export default所以,我这面无论是叫app还是叫什么全可以。 如果export带上名字的话,引用的时候也要固定的名字