关于组件化的一些小建议
返回本版】  【发表帖子】  【回复帖子 浏览量  433      回帖数 0
lanlan123    等级  

楼主 发表于  2019/10/10 11:42:03    编 辑   


随着公司项目多端化,开发所需要注意的细节越来越多。我在会议上提出组件化开发,希望能把业务细节与技术细节区分开来。

 一、组件化流程
首先我们需要找到切入点,我采取的是通过模仿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>
&#160; <button
&#160; &#160; class="x-button"
&#160; &#160; :class="[
&#160; &#160; &#160; type ? ''x-button--'' + type : '''',
&#160; &#160; &#160; buttonSize ? ''x-button--'' + buttonSize : '''',
&#160; &#160; ]"
&#160; >
&#160; </button>
</template>
<script>
&#160; export default {
&#160; &#160; name: ''XButton'',
&#160; &#160; props: {
&#160; &#160; &#160; type: {
&#160; &#160; &#160; &#160; type: String,
&#160; &#160; &#160; &#160; default: ''default''
&#160; &#160; &#160; },
&#160; &#160; &#160; size: String,
&#160; &#160; },
&#160; };
</script>
2.3 slot 插槽的配置与使用
合理使用 slot 插槽,例如:组件内嵌组件,组件内嵌文字,内嵌 iconfont 等;

三、 组件的配置
在 app.js 中使用 vue.use(components) 对组件进行配置,再在相关页面进行引用。
更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。
网站:www.lanlanwork.com
全国统一客服热线:400-608-6026
公司邮箱:weibaobei@163.com
1
表情
所有内容均为会员自愿发表,并不代表本站立场.