一起封装vue ui组件，然后发到npm上！（1）

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

这里的css和icon我是用的color-ui的，我自己写css的话……那可能是一个灾难。

前置知识：

1. 会使用vue开发项目
2. 封装过vue组件
3. 至少看过jsx语法（虽然我也不太懂这个语法……:joy:）
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;

复制代码

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

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

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组件没啥区别撒？？？辣么就对了。