第一版预计实现的组件及文档

[jetiny]

讨论分析第一版预计实现的组件及文档展现形式

[jetiny]

参考资料

muse http://www.muse-ui.org
nuxt https://cn.nuxtjs.org/guide/installation
blu https://chenz24.github.io/vue-blu/#/
vue-bulma https://github.com/wangxg2016/vue-bulma
vue-switches https://github.com/drewjbartlett/vue-switches
vue-kit http://vue-kit.gismall.com/#!/dashboard
vue-bulma-select https://gabrielcorado.github.io/vue-bulma-select/
vum http://getvum.com/
iView https://www.iviewui.com/
Keen-UI https://github.com/JosephusPaye/Keen-UI
vuikit https://vuikit.js.org

https://github.com/jetiny/css-way
https://github.com/aflover/csskit
https://github.com/aflover/veak

[Ricky201608]

1.先过一下上周的任务
1）设计：准备如何设计组件，以及项目官网的设计（包括内容和外观）
2）样式：BLUMA的基本知识，过一下文档
3）文档：建议文档如何写，要写哪些内容及呈现格式
4）组件：如何编写如何实现
a.sav提供工具方法
b.vuejs的组件开发知识：包括props，slot，events，如何调用和demo效果，测试用例
具体可以参考Vuejs的官方文档和组件教程
c.基本上我们要实现的组件，github上肯定已经有了，可以借鉴别人好的思路
d.测试用例驱动开发，实现具体的组件
e.文档建议参考muse-ui和iview的

2.讨论决定要写哪些组件
第一版预计实现不少于6个组件和一个官网，官网包括文档+demo
原则上是无依赖的基础组件优先实现
可以从以下组件中挑选：
按钮button，input,select，radio/checkbox,dialog,table,tab,nav ,pagenation,tips,list,grid,progress,datepicker等

[hui0hui]

  今天才开始想上周的任务，对于如今竞争如此激烈的前端界来说，出一个组件库，首先要起一个名字的定义。然后是使用场景以及版本及兼容，以及技术的选用。
  组件库一般都会自带一套主题，也可能会有多套主题可供选择，当然也要满足用户自定义的需求。为了方便用户覆盖样式，我们采用 BLUMA风格来写 CSS，这样的好处是类名基本都是一级，少数才会有嵌套情况，这样很容易的就可以直接覆盖掉原有样式。支持每行最多容纳 24 列的布局，栅格系统对高级浏览器支持 Flex布局，包括 Flex对齐、Flex排列、Flex顺序，也支持栅格的排序、偏移、间隔。友好栅格系统对页面的拆分布局起到了关键作用，你可能不用再写任何布局代码就可以轻松使用栅格完成你的需求，而且它很精准。

文档个人认为内容不要太多，基本的 API 和生命周期描述就够了，尽量减少初始化配置相关的描述，避免使用者压力太大。 API 在文档编写上也是做到了事无巨细（每个组件的每个功能都有非常详细的说明，包括像哪些参数需要.sync使用，一些隐藏的功能、可能遇到的坑等等，同时每个 demo 都有完整的代码示例，一键复制，粘贴后就可以直接看到效果。API 也按照 props、events、slot 三部分拆分，避免混合说明遗漏和阅读不便利。
全局组件是一类比较特殊的组件，如 Modal 他们只需要放置在适当位置，在需要的时候弹出或者请求交互即可，不需要重复的注册、调用、销毁，这种该如何去考虑场景？所以我们的解决方案是将这一类组件放置在根实例中，直接使用父组件的响应式数据对象，这样任何子组件都可以在业务代码中通过我们定义的 Vue 的实例方法来调用它们。
最后是如何去维护组件，这个是一个问题。还有测试用例该如何设计？先写在这里吧，后续再补充吧。

[ijython]

官网：
文档这块，我看了几个文档的官网，例如http://www.muse-ui.org 和https://www.iviewui.com/这两个官网都是用Node写的express，一个是前后端分离的muse和一个后端渲染的iviewui
综合觉得可能用koa2这个框架来说也能比较符合我们团队的开发需求。如果静态输出的话就维护每个页面。如果用数据库的话用mysql，可能用一个koa2的路由，然后找一个mysql 的orm我看了几个orm觉得都实现的很复杂，看有必要我们自己实现一个简单的使用方便的对数据库进行增删改查的orm没有，如果有，下来可能先写一个简单的Orm。接下来我们需要讨论的是看需要前后端分离还是后端模板渲染。
我个人比较推荐iview这个网站的包括ui，包括展示形式都看着很好，

bluma
整体感觉bluma的整体ui外观看着比其它的一个ui看着好看些，命名看着也很舒服，

组件
李宇阳可以先写一个demo,然后分配给我和会会几个组建，我们按照demo的标准进行编写，然后交付李宇阳看下验收，每个人写完组建然后写一个小的说明文档，官网文档可以依据这些小的文档进行整理，如果文档写的比较详细可以直接放到官网文档上

[jetiny]

目前为止这里并没有任何结论 @Ricky201608

[jetiny]

如果有类似这样的文档,在此基础上分析讨论会不会更好?

文档展现方式

• 定义文档数据结构
• 定义文档展现形式
  ...

预计实现的组件

• 按钮 Btn
• 输入框
• 选择框
  ...

按钮组件

PROPS 属性

• style 设置按钮样式

SLOTS 插槽

• default 默认插槽

EVENTS 事件

• onclick

METHODS 方法

• submit

EXAMPLES 例子

• default

[Ricky201608]

文档展现方式

• 文档展现形式
  • 先按json格式设计组件的api ，内容可以用Markdown形式
  • 后期参考方案整合渲染到html配合例子和demo
• 文档数据结构
  1.简单描述
  2.例子和用法
  3.API，包括props，slots, events ,methods

预计实现的组件 (第一版为6个表单组件和1个Ued项目官网)

• Icon 会会
• 按钮 Btn，btn-group,btn-icon 会会
• 输入框，input，input-group 晓飞
• 选择框（单选和多选）radio&CheckBox
• 下拉框select 晓飞
• 弹框modal
• label, badge 会会
• tooltips *
• switch *
• notice *
• pagenation *
• step *
• loading *