【一分鐘閱讀】關於組件化，我有一些小建議

隨着公司項目多端化，開發所需要注意的細節越來越多。我在會議上提出組件化開發，希望能把業務細節與技術細節區分開來。

 一、組件化流程

首先我們需要找到切入點，我採取的是通過模仿element-ui的組件，先讓我們美工小姐姐，照着element的組件庫描繪一版我們自己的組件，內容包括 顏色、字體、按鈕、圖片 等基礎UI組件。這就是我們組件化第一步，UI 組件形成。

其次是業務組件的補充，這方面我和項目經理還有其他前端一起商討，將跨場景跨頁面同樣效果的部分給抽象成組件。組件化第二步，業務組件形成。

然後就是漫長的更迭與組件補充。

二、組件化細節處理

2.1 全局文件佈置

無論是UI組件還是業務組件，都包含着class與css。

變量值我選擇存放在兩個公共文件內：

一個負責管理class名，諸如 x-btn-s，x-btn-m，x-btn-l，x-pic-s，聲明規則：公司名-組件名-尺寸（業務場景）。

另一個負責管理 css 變量值， 諸如 $-font-s： 12px，$-font-m：16px； $-font-l：24px；$-background-warn: #f00；聲明規則：$-相關樣式-大小（顏色）。

再通過 exports 與 import 對全局文件進行調用。

2.2 組件的多樣化使用

通過全局文件的配置，我們對組件的調用從一對一調用變成了一對多調用。如下：

使用全局變量前，我們只能通過以下形式調用

<x-button/>

現在我們可以通過：class的形式調用<x-button/>的多種形態，如下：

<x-button type="$-x-btn-warn' size-'$-x-btn-s'>註冊</x-button>

當然，我們還需要在組件內部定義好:class部分，配置如下：

<template>
  <button
    class="x-button"
    :class="[
      type ? 'x-button--' + type : '',
      buttonSize ? 'x-button--' + buttonSize : '',
    ]"
  >
  </button>
</template>
<script>
  export default {
    name: 'XButton',
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: String,
    },
  };
</script>

2.3 slot 插槽的配置與使用

合理使用 slot 插槽，例如：組件內嵌組件，組件內嵌文字，內嵌 iconfont 等；

三、 組件的配置

在 app.js 中使用 vue.use(components) 對組件進行配置，再在相關頁面進行引用。