一起封裝vue ui元件，然後發到npm上！（1）

MartinYin發表於2019-04-27
封裝VueUI元件NPM

前言巴拉巴拉

我會帶大家從淺入深的封裝一些常用的元件，並解析。 這個系列預計會寫五六篇左右，可能會更多，會帶大家封裝一個公用元件和一些業務性元件。從淺層到複雜的元件封裝最後發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多種情況。

一起封裝vue ui元件，然後發到npm上！（1）

一起封裝vue ui元件，然後發到npm上！（1）
這個常見把！ 如果是讓我自己寫一個navbar的元件，我一般只會考慮這些情況。

  1. 返回文字可以配置
  2. 標題可以配置
  3. 右邊icon可以配置。

我只會考慮到這些。因為我的專案就只有這些需求了，任務完成!

辣麼vant呢？

一起封裝vue ui元件，然後發到npm上！（1）

可以看到考慮到了很多情況！已經可以滿足大部分的需求了。

第三個問題

一起封裝vue ui元件，然後發到npm上！（1）

WTF？？？？

一起封裝vue ui元件，然後發到npm上！（1）

  <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。(專案名就不要在意了。)

一起封裝vue ui元件，然後發到npm上！（1）

  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;

複製程式碼

是的你沒有看錯……我們已經寫完一個可複用的元件了……?

一起封裝vue ui元件，然後發到npm上！（1）

別開炮……程式碼還沒寫完……

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 ui元件，然後發到npm上！（1）

這個時候呢！你可以.vue 頁面使用了Icon 這個元件了！

是不是感覺跟我們們平時封裝的vue元件沒啥區別撒？？？辣麼就對了。

下一步

下一篇文章的話帶大家封裝一個tabbar！敬請期待。。。。。。。。。。。。。

相關文章