一块儿封装vue ui组件，而后发到npm上！（1）

前言巴拉巴拉

我会带你们从浅入深的封装一些经常使用的组件，并解析。 这个系列预计会写五六篇左右，可能会更多，会带你们封装一个公用组件和一些业务性组件。从浅层到复杂的组件封装最后发npm包。

这里的css和icon我是用的color-ui的，我本身写css的话……那多是一个灾难。

前置知识：

1. 会使用vue开发项目
2. 封装过vue组件
3. 至少看过jsx语法（虽然我也不太懂这个语法……😂）
4. es6 多少要会一些。

思考：

不知道你们有没有想过这几个问题？
复制代码

1. ui组件的代码是怎么封装的？

2. 咱们本身封装的组件跟那些发到npm上面的ui组件有啥不一样？

3. 为何这个俩组件要这样子使用？？

import { Tabbar, TabbarItem } from 'vant';
   Vue.use(Tabbar).use(TabbarItem);
   
   <van-tabbar v-model="active">
     <van-tabbar-item icon="home-o">标签</van-tabbar-item>
     <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
     <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
     <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
   </van-tabbar>
复制代码

第一个问题：

其实ui组件的封装跟我们写的组件封装方式是差很少的！只是别人考虑的状况多。

第二个问题：

区别嘛，也不大。只是别人封装好的组件帮我们考虑了N多种状况。

这个常见把！ 若是是让我本身写一个navbar的组件，我通常只会考虑这些状况。

1. 返回文字能够配置
2. 标题能够配置
3. 右边icon能够配置。

我只会考虑到这些。由于个人项目就只有这些需求了，任务完成!

辣么vant呢？

能够看到考虑到了不少状况！已经能够知足大部分的需求了。

第三个问题

WTF？？？？

<div
    class="el-steps"
    :class="[ !simple && 'el-steps--' + direction, simple && 'el-steps--simple' ]">
      <slot></slot>
  </div>
复制代码

那我们看看 element的step。

好像都有一个slot 插槽。辣么这样就能明白了！

Tabbar 是一个父div，里面包裹着 TabbarItem。

封装ui组件

这是一个很是累人的事情……搞很差被喷都很正常……

我已经作好被喷的准备了！！！！！！！！！！！

1. 新建一个vue项目（不作讲解了。）

2. 把color-ui的css 拷贝过来,并在App.vue 中引入。 或者从这个地方拿过来https://github.com/martin-yin/Pipi-Dinosaur/tree/master/src/assets

3. 在项目根目录新建 packages/icon/index.js, packages/icon/main.js。(项目名就不要在乎了。)

4. 开始编写代码

main.js

export default {
    name: 'Icon',
    props: {
        icon: String,
        styled: String,
        color: String,
    },
    render(h) {
    // 确定有小伙伴会问这个this 是谁？？？？ 其实就是你这个Icon vue对象。
      const { icon, color, styled } = this;
      return (
        <span style={styled} class={[icon, color]}></span>
      );
    }
  }

复制代码

index.js

import Icon from './main';

// 注册组件……
Icon.install = function(Vue) {
    Vue.component(Icon.name, Icon);
};

export default Icon;

复制代码

是的你没有看错……咱们已经写完一个可复用的组件了……😂

别开炮……代码还没写完……

main.js中添加两行代码。

import icon from '../packages/icon';
// 使用这个插件
Vue.use(icon);

复制代码

App.vue

    <div v-for="(item, index) in iconList" :key="index">
     <Icon :icon="item.name" color="text-green" styled="font-size: 38px"/>
    </div>
    export default {
      data(){
       return {
       iconList: [
        {
          name: 'icon-appreciate'
        }, {
          name: 'icon-check'
        }, {
          name: 'icon-close'
        }, {
          name: 'icon-edit'
        }, {
          name: 'icon-formfill'
        }, {
          name: 'icon-loading2'
        }, {
          name: 'icon-list'
        }, {
          name: 'icon-cascades'
        }, {
          name: 'icon-tagfill'
        }, {
          name: 'icon-vipcard'
        }
      ]
    }
  }
}
    
复制代码

启动项目

这个时候呢！你能够.vue 页面使用了Icon 这个组件了！

是否是感受跟我们平时封装的vue组件没啥区别撒？？？辣么就对了。

下一步

下一篇文章的话带你们封装一个tabbar！敬请期待。。。。。。。。。。。。。