加快Vue项目的开发速度的方法(5)

日期：2020-05-11 栏目：程序人生浏览：次

使用了mixins之后一个简单的有loadoing, 分页,数据的表格大概就只需要上面这些代码。

注意： <font color="red">mixins它固然是简单的，但是注释和引用一定要做好，不然的话新成员进入团队大概是一脸的懵逼，而且也不利于后期的维护。也是一把双刃剑。另外：全局mixins一定要慎用，如果不是必须要用的话我还是不建议使用。</font>

进一步对组件进行封装

大家都知道组件化的最大的好处就是高度的可复用性和灵活性。但是组件怎么封装好，封装到什么程度让我们更方便。这是没有标准的答案的。我们只有根据高内聚，低耦合的这个指导思想来对我们的业务通用组件来进行封装，让我们的业务页面结构更加的简洁，加快我们的开发效率。封装多一点的话页面可能会变成这样:

<template>
 <box-content>
  <!-- 头部标题部分 -->
  <page-title>
   <bread slot="title" :crumbs="[{name: 'xx管理', path: '', active: true, icon: ''}, {name: 'xxxx', path: '', active: true, icon: ''}]"></bread>
  </page-title>
  <!-- 表格部分 -->
  <div>
   <base-table v-loading="loading" :columns="headers" :list="list" :page-no ="pageNo" :page-size="pageSize" :total-count="totalCount" @delete="deleteItm" @change-size="handleSizeChange" @change-page="handleCurrentChange">
   </base-table>
  </div>
 </box-content>
</template>

有什么东西一目了然。

无状态组件

最容易勾起我们封装欲望的就是无状态HTML组件，例如我们除去header, menu之后的content部分。没有什么需要复杂的交互，但是我们每个页面又都得写。你说不拿它开刀拿谁开🔪

<template>
 <div class="container-fluid" :class="[contentClass]">
   <el-row>
     <el-col :span="24">
       <!-- box with #fff bg -->
       <div class="box">
         <div class="box-body">
           <slot></slot>
         </div>
       </div>
     </el-col>
   </el-row>
 </div>
</template>

上面这个处理非常的简单，但是你在项目中会非常频繁的使用过到，那么这个封装就很有必要了。

ElementUI table组件封装

ElementUI中得组件其实已经封装得很优秀了，但是表格使用得时候还是有一堆得代码在我看来是不需要在业务中重复写得。封装到靠配置来进行表格得书写得一步我觉得就差不多了，下面是一个小

加快Vue项目的开发速度的方法(5)

相关推荐