VueFastDev简介
vue-fast-dev是一套基于element-ui、Echarts等二次开发封装、模块化的前端UI组件库。致力于快速高效的PC端开发(特别是中后台产品)提供一个快速且灵活的解决方案。
VueFastDev 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。
VueFastDev相关文档
-
NPM地址:https://www.npmjs/package/vuefastdev
-
开发文档: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 - 前端快速开发工具
发布评论