VueFastDev简介

vue-fast-dev是一套基于element-ui、Echarts等二次开发封装、模块化的前端UI组件库。致力于快速高效的PC端开发(特别是中后台产品)提供一个快速且灵活的解决方案。

VueFastDev 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。

VueFastDev相关文档

  1. NPM地址:https://www.npmjs/package/vuefastdev

  2. 开发文档:http://web_help.gitee.io/vuefastdevdocs

VueFastDev开发背景

有时候其实只想做个普通的增删改查界面,用于信息管理,类似下面这种:

这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概,但仔细观察会发现它有大量细节功能,比如:

  • 可以对数据做筛选

  • 有按钮可以刷新数据

  • 编辑单行数据

  • 批量修改和删除

  • 查询某列

  • 按某列排序

  • 隐藏某列

  • 开启整页内容拖拽排序

  • 表格有分页(页数还能同步到地址栏,不过这个例子中关了)

  • 有数据汇总

  • 支持导出 Excel

VueFastDev作用

1.提供完整的界面解决方案:VueFastDev 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线;

2. VueFastDev 则内置大量组件,包括了文件上传,搜索查询等,绝大部分中后台页面开发只需要了解 VueFastDev 就足够了;

3. 支持扩展:除了低代码模式,还可以通过 自定义组件 来扩充组件,实际上 VueFastDev 可以当成普通 UI 库来使用,实现 90% 低代码,既提升了效率,又不失灵活性; 

4. 容器支持无限级嵌套:可以通过嵌套来满足各种布局及展现需求;

VueFastDev使用方法

推荐使用 npm 的方式进行开发,享受 node 生态圈和 webpack 工具链带来的便利。通过 npm 安装的模块包,我们可以轻松的使用 import 或者 require 的方式引用;

全局组件使用

可以在项目的入口文件(main.js)中引入所有组件或所需组件

  import Vuefastdev from 'vuefastdev'  // 引入组件库
  import 'vuefastdev/dist/vuefastdev.css' // 引入样式库

  Vue.use(Vuefastdev)

单个组件使用

可以局部注册所需的组件,适用于与其他框架组合使用的场景

import {FastDevButton } from 'vuefastdev'

export default {
  components: {
     FastDevButton
  }
}

VueFastDev使用案例

 你学到了什么,欢迎补充!!

欢迎大家留言讨论,祝工作顺利、生活愉快!

有想法的可以一起来参与讨论学习啦!加v:  web_help

更多推荐

VueFastDev - 前端快速开发工具