VFUI是一款基于VUE3 CLI的后台管理web UI框架。
开发工具为VsCode。使用CLI需先安装node.js。
本框架包括面包屑组件、顶部导航组件、左侧导航组件、确认对话框、列表组件、加载中组件、按钮菜单组件、分页导航组件、下拉列表组件、开关按钮组件、表单标签页组件、消息提示组件。
为何要开发这个框架？
因为泛依系列软件的webUI部分代码都是开发者一边开发后端，一边开发前端，逐步积累起来的，存在多系统之间样式代码不统一问题。
开发者不想每次遇到同样的样式问题再去查看之前的代码，再去思考是怎么实现的，本着打造统一规范且现代的前端代码，VFUI就这么来了。
V代表VUE，F取自开发者姓名全拼首字母，UI代表界面。
作为职业C#后端，开发者老早就觉得前端比后端更接近用户体验，是技术和艺术的结合。自己实现一个虽然丑了点，但是代码最简单且自主可控。
这是一个后端程序员视角下实现的前端后台管理webUI框架，代码简单，容易快速上手，完全数据驱动。
如果您只想实现一个CRUD的后台管理，不用管样式，直接填充数据就行了。
<BreadNavComponent ref="breadNavRef" :isNavigatorExpand="isNavigatorExpand" :twoNavID="twoNavID" @BreadcrumbClick="BreadcrumbClick"></BreadNavComponent>
isNavigatorExpand:左侧二级导航伸缩标志，配合左侧导航伸缩
twoNavID:当前左侧二级导航ID，实现与左侧二级导航项的联动显示
BreadcrumbClick:面包屑项点击触发方法
<HeaderComponent :title="title" v-model="isNavigatorExpand"></HeaderComponent>
title:左上角文字标识
v-model:左侧二级导航伸缩标志，双向绑定
<LeftNavComponent ref="leftNavRef" :isNavigatorExpand="isNavigatorExpand" :navItems="navItems" v-model="twoNavID" @TwoNavClick="TwoNavClick"></LeftNavComponent>
isNavigatorExpand:左侧二级导航伸缩标志
navItems:数据源JSON数组
v-model:当前左侧二级导航ID，双向绑定
TwoNavClick:二级导航项点击触发方法
<ComfirmDialog title="确认对话框" message="确认删除该条记录吗？" :isShow="isShowConfirmDialog" @ok="ok" @no="no" />
title:标题
message:内容
isShow:控制对话框显示与隐藏
ok:确定按钮触发事件
no:取消按钮触发事件
<ListComponent :headItems="headItems" :dataItems="dataItems" :actionItems="actionItems" @doAction="doAction" @sort="sort" @format="format" @dataCss="dataCss" />
headItems:列标题JSON数组
dataItems:数据行JSON数据
actionItems:按钮JSON数组
doAction:点击按钮菜单项触发事件
sort:点击列标题触发排序
format:格式化单元格文本显示
dataCss:格式化单元格显示样式
<LoadingComponent v-model="loading"></LoadingComponent>
v-model:为双向绑定变量，通过这个变量实现加载中动画显示与隐藏
<MenuComponent :id="dataItem.id" :currentID="currentID" :items="actionItems" @setCurrentID="setCurrentID" @doAction="doAction" />
该组件用于列表组件内实现数据行的下拉操作
id:按钮菜单ID
currentID:当前显示的按钮菜单ID（用于控制同一时间只有一个按钮菜单显示）
setCurrentID:设置当前按钮菜单ID（将按钮菜单组件的ID传给列表组件）
doAction:点击按钮菜单项触发的方法（用于列表数据行的CRUD操作）
<PagerComponent :total="total" :pageSize="pageSize" :currPageIndex="queryParams.pageIndex" @query="query" />
total:记录总数
pageSize:每页记录数
currPageIndex:当前分页号（默认从1开始）
query:点击触发的方法
<SelectComponent selectName="教育程度" :items="eduDS" v-model="queryParams.eduCode" @change="eduSelectChange" />
selectName:未选择项时显示的名称
items:数据项JSON数组
v-model:双向绑定的选择值
change:选择事件
<SwitchComponent v-model="isEnableWebApi" title="调用在线网表fyybuilder.com/api" @change="SwitchChange" />
v-model:自定义的双向绑定变量，实现按钮的开和关
title:显示的标题
change:点击触发的事件
<TabsComponent :tabs="tabs">
<template #tab1>
</template>
<template #tab2>
</template>
</TabsComponent>
tabs:标题JSON数组
#tab1:对应slot1
#tab2:对应slot2
<ToastComponent ref="toast"></ToastComponent>
ref:通过this.$refs.toast.show(message, type)，其中message为需要提示的内容，type为提示类型（默认:success成功，error失败）
AboutView.vue:关于页面
AddView.vue:新建页面
FrameView.vue:主框架页面
ListView.vue:列表页面
LoginView.vue:登录页面
登录页
主界面
新建页
