哈喽哈喽 大家好，今天跟大家分享一下关于vue开发的一些小技巧。

目前前端最主流的两个 开发 模式 就是 react 和 vue 。他们的特点显明，一个是类似 jsp的jsx语言，js动态拼凑html片段，一个是模板与控制分开，各有千秋，都有大量的支持者。

今天主要给大家介绍一个基于vue的项目，从哪些方面可以帮你提升开发效率，以及工程的一致性。

通常我们会在vue项目中引入element-ui，这是美化后的基础组件，因为有样式修饰，外观比html原生的form组件要精美，同时提供了更符合当下页面功能的其他组件，比如日期选择，无限滚动，树形等等。

但是element-ui为了能尽可能的被各种需求复用，他提供和的都是和业务无关的基础组件，而且大部分组件是基于模板驱动，比如他的table，他的导航，因为这样可以定义更灵活的外观，但是开发工作量还是挺大的。

今天给大家推荐一个基于element-ui之上，能帮你大大提升开发效率的一套扩展 组件库 tsyvue。

http://tsy.zone/tsyvue/home

这里是他的组件介绍，详细介绍了tsyvue解决的问题，能怎样提升开发效率

tsyvue通过npm进行安装，在该站点也提供了一个应用了tsyvue的例子工程。方便大家学习。

这里组要介绍两个最能提升开发效率的组件，也是信息系统中使用最多的两类页面。

1. 分页查询：

http://tsy.zone/tsyvue/sy-pagin-table

分页查询占一般信息系统一半的工作量，一般缺乏开发经验的小公司可能会招聘大量的初级程序员，每个人每个页面的单独开发。每个人对需求的理解能力，对设计稿的观察细致度不一样，导致实现出来的分页查询也各式各样，其中大量的重复工作，开发效率低，质量也难以保障。

这里介绍的sy-pagin-table组件，主要帮你完成了数据拉取、检索条件变化自动检索、分页控制、列排序等功能，组件用户只需要关注如何构建layout即可，关于table的layout，也是通过数据定义的方式，把columns定义作为 prop传给组件，由组件帮你绘制统一的table。大大简化了分页查询页面的开发成本，提供了分页查询页面的行为一致性。推荐大家下载例子项目亲自体验。（如果例子工程存在编译错误，最大的可能性是 工程中 使用的node-sass和你本地的node-js的版本不匹配导致的，请先查看你本地node的版本，然后在node-sass官方找到对应的版本的node-sass，在package.json中修改依赖的node-sass版本，同时sass-loader的版本也需要和node-sass相匹配）

这个组件因为会通过ajax发起拉数据的请求，请在vue工程的全局mixin中，在vue实例的this上绑定 $axios 实例，$axios 就是 axios的实例，$axios接受的参数会直接透传给axios，具体请参考axios的文档。

sy-pagin-table的主要参数：

url： 用来拉取数据的接口地址

columns：列定义，Array[Column]， 其中Column对象 支持三种方式获得数据，prop: 字段名称; getContent(data): 函数接收当前行，返回要展示的内容； slot: 自定义html模板，方便编写灵活的控制按钮等。

sy-pagin-table因为提供了默认的table来展示数据，你可能希望 绘制 card形式的数据，不想以table的方式展示， 请使用 sy-pagin-data组件，这个组件会把分页后的数据通过slot-scope传给你，你来逐条绘制每一条卡片，剩下检索、分页的行为逻辑和sy-pagin-table是一致的。

2. Form表单：

http://tsy.zone/tsyvue/form-mixin

一个系统中，表单有很多，如果归纳总结，每个表单其实只是 layout不一样，验证逻辑的细节 不一样，但是表单 的提交，数据拉取，以及 验证的报错方式，这些行为应该都是一样的。也就是所我们可以从中 抽取出大量的共通逻辑，实现复用，避免重复开发。甚至说，新建和编辑表单，他们的layout和表单验证逻辑的大部分都是复用的。文档中详细介绍了如何开发标准行为的form表单。可以对比一下，自己开发的form的工作量和采用推荐模式的标准form的工作量。