【一分钟阅读】关于组件化,我有一些小建议 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


【一分钟阅读】关于组件化,我有一些小建议

2019-10-3 释然 前端及开发文章及欣赏


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

 一、组件化流程
首先我们需要找到切入点,我采取的是通过模仿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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。
标签: 【一分钟阅读】关于组件化 我有一些小建议 « bootstrap+spring boot实现面包屑导航 | 帝皇彩票官网jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数)»


蓝蓝 http://www.bjhbys.com

  1. 2019年11月(3)
  2. 2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 帝皇彩票官网2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 2018年10月(29)
  15. 2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 帝皇彩票官网2018年6月(86)
  19. 2018年5月(110)
  20. 2018年4月(40)
  21. 帝皇彩票官网2018年3月(35)
  22. 2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 2017年3月(70)
  28. 2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 2016年3月(19)
  38. 2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 帝皇彩票官网2013年9月(20)
  68. 2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 2013年1月(31)
  75. 2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
状元彩票计划 状元彩票平台 状元彩票开奖 状元彩票计划 桔子彩票平台 吉利彩票开户 帝皇彩票登陆 大象彩票APP 桔子彩票平台 帝皇彩票官网