一塊兒封裝vue ui組件，而後發到npm上！（1）

時間 2019-12-04

標籤一塊兒封裝 vue 組件而後 npm 欄目軟件設計简体版

原文原文鏈接

前言巴拉巴拉

我會帶你們從淺入深的封裝一些經常使用的組件，並解析。這個系列預計會寫五六篇左右，可能會更多，會帶你們封裝一個公用組件和一些業務性組件。從淺層到複雜的組件封裝最後發npm包。css

這裏的css和icon我是用的color-ui的，我本身寫css的話……那多是一個災難。vue

前置知識：git

會使用vue開發項目
封裝過vue組件
至少看過jsx語法（雖然我也不太懂這個語法……😂）
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組件的封裝跟我們寫的組件封裝方式是差很少的！只是別人考慮的狀況多。es6

第二個問題：

區別嘛，也不大。只是別人封裝好的組件幫我們考慮了N多種狀況。github

這個常見把！若是是讓我本身寫一個navbar的組件，我通常只會考慮這些狀況。

返回文字能夠配置
標題能夠配置
右邊icon能夠配置。

我只會考慮到這些。由於個人項目就只有這些需求了，任務完成!npm

辣麼vant呢？bash

能夠看到考慮到了不少狀況！已經能夠知足大部分的需求了。app

第三個問題

WTF？？？？ ui

<div
    class="el-steps"
    :class="[ !simple && 'el-steps--' + direction, simple && 'el-steps--simple' ]">
      <slot></slot>
  </div>
複製代碼

那我們看看 element的step。this

好像都有一個slot 插槽。辣麼這樣就能明白了！

Tabbar 是一個父div，裏面包裹着 TabbarItem。

封裝ui組件

這是一個很是累人的事情……搞很差被噴都很正常……

我已經作好被噴的準備了！！！！！！！！！！！

新建一個vue項目（不作講解了。）
把color-ui的css 拷貝過來,並在App.vue 中引入。或者從這個地方拿過來https://github.com/martin-yin/Pipi-Dinosaur/tree/master/src/assets
在項目根目錄新建 packages/icon/index.js, packages/icon/main.js。(項目名就不要在乎了。)

開始編寫代碼

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'
        }
      ]
    }
  }
}
    
複製代碼