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