一步步带你做vue后台管理框架(一)——介绍框架

系列教程《一步步带你做vue后台管理框架》第一课

github地址：vue-framework-wz

线上体验地址：立即体验

《一步步带你做vue后台管理框架》第一课：介绍框架

《一步步带你做vue后台管理框架》第二课：上手使用

《一步步带你做vue后台管理框架》第三课：登录功能

Features 特性

• ?wz脚手架?（脚手架助你安装/卸载组件更方便）
• 工业化UI组件（上手即用，无需自己造轮子）
• 自适应布局（完美适配大中小屏）
• ?多TAB导航（应广大朋友们的业务需求）
• 登录/注销
• 权限验证
• Tinymce 编辑器
• Markdown 编辑器
• 动态侧边栏（支持多级路由）
• 面包屑导航
• JSON展示组件
• echartjs图表
• 404错误页面
• 表格数据直接导出cvs
• 多环境发布
• mock数据
• 炫酷hover特效

　　在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框架

例如：腾讯云这样的

　　

　　亦或是七牛云这样的

　　

　　还是Talkdata这样的

　　发现了有什么相同之处吗？都是侧边栏+头部栏+主页面。

　　这样的项目用vue+vue-router 来开发真是再得心应手不过了。

　　大厂人多不怕累，但是对于我们苦逼的小程序员或者初学者来说，每一个需求或者换一家公司就要重做一个项目，架构什么都要重新写？

　　日常的工作中会有太多重复的内容加重我们程序员的工作，浪费我们的时间，导致不能早点下班回家吃饭。

　　普通程序员拿到一个项目总是会重新写，写路由花了两小时，写vuex花了两小时，写个Header组件花了1小时，侧边栏又要1小时，这样下来项目拿到手一天的时间都没真正去做项目的需求，再加上改bug，写css，准备工作都要花三四天，等到产品过来催，还没有真正去实现功能。这样是极大的浪费时间。

　　那么我们怎么才能成为一个高效率的程序员呢?

　　成功的秘籍就在于需要有一个自己的后台管理框架，当你拿到一个项目，所有的UI组件、路由、状态管理、登录鉴权功能、等等都已经写好，你只需要去复用代码再加上少量的逻辑，当你一个小时做完准备工作，出去买杯咖啡回来看到你的同事还在苦逼的写vue路由，你肯定会会心一笑：“框架在手，天下我有”。

　　表格是我们工作中最常见的组件。就拿写一个表格来举例吧

 　　高下立判。传统写一个表格需要大量重复html，且需要自己写css，自己定义数据渲染方式。效率低下且质量不高，而我们的框架已经定义好表格组件，只需要把注意力放在数据获取上，工作瞬间轻松了很多。

　　　再来看下wz框架表格组件在实际应用中的强大之处吧。

 　　我们的框架已经定义好表格组件，上手即用，是不是又美观又简单好用啊。

　　不止表格，我们还有各种你工作中会遇到的组件，轻松完成工作中出现的复杂需求。

　　UI组件已经有了，我们的框架还有哪些特性呢？　

　　多TAB导航！

　　很多朋友说没有多TAB导航怎么敢称为后台管理系统呢。也有一些朋友在工作中遇到了这样的需求。

　　深感需求紧急的我连夜赶出了多TAB导航。

　　更是支持动态侧边栏，自动判断去往的页面的路由。

　　

　　自适应!!!

　　现在很多vue框架都没有自适应功能，而很多使用场景也在手机上会有，这也是wz后台管理框架诞生的原因之一。　　

　　想想要自己每次做自适应就头疼，现在有了wz框架老板再也不用担心我的界面适配问题了。

    　我们看下效果：

　　 

 　　是不是很棒！wz框架基于超好用的开源UI iview，采用了row和col的思想，Row为一行，Col为一列，配置Col 的sm md lg 等属性就可以做到自适应。

　　代码如下例

<Row>
   <Col :md="8" :sm="12" :lg="9">

  </Col>
</Row>