2019-10-3 seo達人
隨著公司項目多端化，開發所需要注意的細節越來越多。我在會議上提出組件化開發，希望能把業務細節與技術細節區分開來。
一、組件化流程
首先我們需要找到切入點，我采取的是通過模仿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) 對組件進行配置，再在相關頁面進行引用。
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。