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

谁借莪１个温暖的怀抱￠ 2022-10-01 09:56 179阅读 0赞

### 前言巴拉巴拉 ###

我会带大家从浅入深的封装一些常用的组件，并解析。 这个系列预计会写五六篇左右，可能会更多，会带大家封装一个公用组件和一些业务性组件。从浅层到复杂的组件封装最后发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。(项目名就不要在意了。)

1.  开始编写代码

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！敬请期待。。。。。。。。。。。。。

转载于:https://juejin.im/post/5cc15178e51d456e2b15f646