Avue框架学习

我们的项目使用的框架是 Avue
在我看来这个框架最大的特点是可以基于JSON配置页面上的From,Table以及各种各样的输入框等,不需要懂前端就可以很快上手,前提是需要多查一下文档

开发环境搭建

由于我本地的环境全是用docker来搭建的,所以我依然选择用docker搭建我的开发环境

1.编写dockerfile构建基础镜像

# vue项目是依赖node.js环境的
# 直接依据官方的node.js镜像来进行构建
# {version} 替换成所需的node.js版本
FROM node:{version}# 设置工作目录
WORKDIR /app# 先把package复制到镜像用于构建项目依赖
COPY package*.json ./
RUN npm install# 在把项目复制到镜像中
COPY . .# 暴露开发服务器端口
EXPOSE 8081# 启动开发服务器
CMD ["npm", "run", "dev" , "--" , "--port" , "8081"]

2.编写docker-compose.yaml指定镜像运行容器

# 我本地的docker版本比较高,不需要指定version# 服务
services:# 服务名称tpm:# 将当前目录下的Dockerfile构建成一个新的镜像build:context: .dockerfile: Dockerfile# 指定容器的名称  container_name: tpm# 将当前目录下所有文件挂在进容器内# dockerfile中的执行的 npm install 生成的node_modules也需要挂在到宿主机volumes:- .:/app- /app/node_modules# 环境变量 CHOKIDAR_USEPOLLING 用于解决在 Docker 中文件系统事件丢失的问题environment:- CHOKIDAR_USEPOLLING=true# 开启一个模拟的终端stdin_open: truetty: true# 端口映射ports:- "8081:8081"# 指定网络
networks:default:driver: bridgeipam:driver: default

3.运行起来~

# 找到docker-compose.yaml文件并执行以下命令
docker-compose up

在这里插入图片描述

执行到这一步已经可以进行开发任务了,访问 http://localhost:8081/

通过 docker logs -f tpm 就可以查看容器的日志啦

Avue速查手册

avue-crud 配置项

<avue-crud:option="option"                    // 表格配置属性:table-loading="loading"            // 表格等待框的控制,加载的时候转圈圈,设置true/false:search.sync="search"               // 搜索的变量(需要sync修饰符):visible.sync="changelnfo"          // 是否显示,设置true/false:data="data"                        // 表格显示的数据:page.sync="page"                   // 表格分页配置选项(需要sync修饰符):permission="permissionList"        // 权限控制:before-open="beforeOpen"           // 打开前的回调function(file,column)v-model="form"                      // 数据模型用来存取页面值的ref="crud"                          // 在普通的DOM元素上使用,引用指向的就是DOM元素@cell-click="pageto"                // 表格点击运行方法onclick方法定义@row-update="rowUpdate"             // 更新数据后确定触发该事件@row-save="rowSave"                 // 新增数据后点击确定触发该事件@row-del="rowDel"                   // 行数据删除时触发该事件@row-click="handleRowClick"         // 单击行运行的方法@search-change="searchChange"       // 点击搜索后触发该事件@search-reset="searchReset"         // 清空搜索回调方法@selection-change="selectionChange" // 点击页码会调用current-change方法回调当前页数,返回当前第几页@current-change="currentChange"     // 点击每页多少条会调size-change方法回调@size-change="sizeChange"           // 点击刷新按钮触发该事件@refresh-change="refreshChange"     // 当选择项发生变化时会触发该事件@on-load="onLoad"                   // 打开表格页面的方法,一般用来初始化,返回页面数据
>

option 参数解释


option: {height:'auto',              // 表格高度calcHeight: 30,             // 表格高度差searchShow: true,           // 首次加载是否显示搜索searchMenuSpan: 4,          // 搜索按钮长度searchSpan:6,               // 搜索框长度最大长度24border: true,               // 表格边框是否显示index: true,                // 是否显示序号indexLabel:'序号',          // 并将索引字段设置为"序号"viewBtn: true,              // 是否显示查看按钮selection: true,            // 表格勾选列(即批量删除)dialogClickModal: false,    // 是否可以通过点击modal关闭DialogaddBtn:false,               // 是否显示添加按钮editBtn:false,              // 是否显示编辑按钮delBtn:false,               // 是否显示删除按钮excelBtn:false,             // 表格导出按钮是否显示labelWidth:120,             // 表单前面的标题长度searchLabelWidth:80,        // 搜索项标题长度refreshBtn: false,          // 表格上面小的刷新按钮columnBtn: false,           // 表格上面小的列表按钮searchBtn: false,           // 表格上面小的搜索按钮menu: true,                 // 是否显示操作栏menuWidth:300,              // 表格操作列宽度dialogWidth: '80%',         // 弹出表单的弹窗宽度saveBtnText:'保存',         // 保存按钮文案updateBtnText:'修改',       // 修改按钮文案cancelBtnText:'取消',       // 取消按钮文案addBtnText:'新增',          // 新增按钮文案editBtnText:'编辑',         // 编辑按钮文案delBtnText:'删除',          // 删除按钮文案viewBtnText:'查看',         // 查看按钮文案searchBtnText:'搜索',       // 搜索按钮文案emptyBtnText:'清空',        // 清空按钮文案dialogClickModal: false,    // dialog对话框去掉'点击屏幕空白区就关闭弹框'属性searchShowBtn:true,         // 栏目折叠显隐header:false,               // 隐藏表格头部操作refreshBtn:true,            // 刷新columnBtn: true,            // 操作列显隐excelBtn: false,            // 导出ExcelprintBtn: false,            // 表格打印导出filterBtn: false,           // 筛选
}

column 参数解释

column: [{label:"用户名",             //表格的标题prop:"username",            //表格的keywidth:"150",                //表格的宽度fixed: true,                //是否冻结列hide:true,                  //是否隐藏列index:true,                 //是否显示表格序号默认值:falsevisdiplay:true,             //表单不显示overHidden: true,           //超出用省略号显示rules: [                    //表单校验规则{required: true,     //是否必填message:"提示信息",  //提示信息trigger: "blur"}],addDisabled: true,          //添加的时候禁止修改editDisabled: true,         //编辑的时候禁止修改disabled:true,              //禁止编辑addDisplay: false,          //新增时是否显示 editDisplay: false,         //编辑时是否显示viewDisplay: false,         //查看时是否显示display: false,             //在查看,新增,编辑页面是否显示span:24,                    //span:24-条数据占一行,span:8一行3条数据sortable:true,              //排序方式切换,倒序、正序切换search:true,                //添加可搜索框searchPlaceholder:"搜索框辅助文字",align:"center",             //表单数据居中row: true,                  //是否单独成行}
]

组合式API-生命周期钩子

onMounted()          //组件挂载完成后执行
onUpdated()          //状态变更而更新其DOM树之后调用
onUnmounted()        //组件实例被卸载之后调用
onBeforeMount()      //组件被挂载之前被调用
onBeforeUpdate()     //状态变更而更新其DOM树之前调用
onBeforeUnmount()    //组件实例被卸载之前调用
onErrorCaptured()    //捕获了后代组件传递的错误时调用
onRenderTracked()    //组件渲染过程中追踪到响应式依赖时调用
onRenderTriggered()  //响应式依赖的变更触发了组件渲染时调用
onActivated()        //若组件实例是<KeepAlive>缓存树的一部分,当组件被插入到DOM中时调用
onDeactivated()      //若组件实例是<KeepAlive>缓存树的一部分,当组件从DOM中被移除时调用
onServerPrefetch()   //组件实例在服务器上被渲染之前调用