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()   //組件實例在服務器上被渲染之前調用