VueFastDev - 前端快速开发工具

VueFastDev简介

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

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

VueFastDev相关文档

1. NPM地址：https://www.npmjs.com/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