| 关于组件化的一些小建议 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1512 回帖数 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>   <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) 对组件进行配置，再在相关页面进行引用。 更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com |
||
| 1 |