UI组件库

桌面端

• Element:饿了吗团队出品的桌面端组件库. 组件库丰富,比较简单易用,只是部分组件不好用,e.g. Layout
• Muse-UI: 基于Vue2和Material Desigin的UI组件库,非常漂亮,优秀的动画效果.但是bug太多,还不成熟.期待新版本.

移动端

• Mint-UI:饿了吗团队出品的移动端组件库,微信like样式,组件丰富
• vux: 也是较为成熟的移动端Vue2组件库,组件丰富,简单易用.

其他

awesome-vue #component-collections

响应式设计

• Element layout组件:使用场景较为单一,而且各种诡异bug;
• Bootstrap4 grid.css:目前已经集成到wES-demo中,与Element不冲突. 熟悉的用法,较低的学习门槛,各种场景都能通用. 而且还包含了Flex版本,但浏览器支持有限.

SPA单页应用

模块化开发

使用模块化开发,可以保证代码尽可能地无痛复用.

vue-route

使用Vue-route实现页面路由跳转,支持很多高级特性:

• 统一管理页面跳转,ajax刷新
• 动态路由支持
• 支持过渡动效
• URL统一标准化

动态导航菜单

独立的导航菜单json获取,为不同角色用户定制不同菜单功能项

Css样式

• CSS:难以管理,编写很容易混乱,并且难以重用;
• Less:支持样式嵌套,变量,方法等高级特性,非常适用与大型项目.学习成本极低,5分钟就能上手;
• Sass:类似Less,之前版本使用ruby编译,现在可使用sass.js预处理,Sass3后支持css样式写法,语法细节不如Less.

Json数据获取

类库选择

• vue-resource:vue.js全家桶组件,较为成熟,但是更新不够及时
• axios:较为成熟,并且更新速度相当快,支持各种高级特性,vue官方也推荐使用
• fetch:不成熟,依赖标准
• JQuery ajax:过时写法.

设计细节

• 在common.js封装基础方法,绑定axios,提供默认错误提示
• 每个单独业务组件使用不同的js模块,这样UI与数据交互分离,方便后期单元测试编写