2019-10-3 seo達(dá)人
隨著公司項(xiàng)目多端化，開(kāi)發(fā)所需要注意的細(xì)節(jié)越來(lái)越多。我在會(huì)議上提出組件化開(kāi)發(fā)，希望能把業(yè)務(wù)細(xì)節(jié)與技術(shù)細(xì)節(jié)區(qū)分開(kāi)來(lái)。
一、組件化流程
首先我們需要找到切入點(diǎn)，我采取的是通過(guò)模仿element-ui的組件，先讓我們美工小姐姐，照著element的組件庫(kù)描繪一版我們自己的組件，內(nèi)容包括 顏色、字體、按鈕、圖片 等基礎(chǔ)UI組件。這就是我們組件化第一步，UI 組件形成。
其次是業(yè)務(wù)組件的補(bǔ)充，這方面我和項(xiàng)目經(jīng)理還有其他前端一起商討，將跨場(chǎng)景跨頁(yè)面同樣效果的部分給抽象成組件。組件化第二步，業(yè)務(wù)組件形成。
然后就是漫長(zhǎng)的更迭與組件補(bǔ)充。
二、組件化細(xì)節(jié)處理
2.1 全局文件布置
無(wú)論是UI組件還是業(yè)務(wù)組件，都包含著class與css。
變量值我選擇存放在兩個(gè)公共文件內(nèi)：
一個(gè)負(fù)責(zé)管理class名，諸如 x-btn-s，x-btn-m，x-btn-l，x-pic-s，聲明規(guī)則：公司名-組件名-尺寸（業(yè)務(wù)場(chǎng)景）。
另一個(gè)負(fù)責(zé)管理 css 變量值， 諸如 $-font-s： 12px，$-font-m：16px； $-font-l：24px；$-background-warn: #f00；聲明規(guī)則：$-相關(guān)樣式-大?。伾?br />
再通過(guò) exports 與 import 對(duì)全局文件進(jìn)行調(diào)用。
2.2 組件的多樣化使用
通過(guò)全局文件的配置，我們對(duì)組件的調(diào)用從一對(duì)一調(diào)用變成了一對(duì)多調(diào)用。如下：
使用全局變量前，我們只能通過(guò)以下形式調(diào)用
<x-button/>
現(xiàn)在我們可以通過(guò)：class的形式調(diào)用<x-button/>的多種形態(tài)，如下：
<x-button type="$-x-btn-warn' size-'$-x-btn-s'>注冊(cè)</x-button>
當(dāng)然，我們還需要在組件內(nèi)部定義好: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 插槽，例如：組件內(nèi)嵌組件，組件內(nèi)嵌文字，內(nèi)嵌 iconfont 等；
三、 組件的配置
在 app.js 中使用 vue.use(components) 對(duì)組件進(jìn)行配置，再在相關(guān)頁(yè)面進(jìn)行引用。
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn