# 前端vue #
> 項目簡介
使用Pig-ui前端界面，其中Avue是基于vue和element-ui的快速開發框架
本項目中可以模擬pig-ui中的使用， 減少讀文檔的時間。如果要擴展的話， 就需要補充一下vue和相關組件的知識了。
源碼 [https://gitee.com/log4j/pig-ui](https://gitee.com/log4j/pig-ui)
演示地址[https://preview.pig4cloud.com/#/login](https://preview.pig4cloud.com/#/login)
使用項目|版本|文檔/官網
-|-|-
Avue|^1.6.0|[https://avue.top/#/](https://avue.top/#/)
element-ui | ^2.4.11 | [https://element.eleme.cn](https://element.eleme.cn/)
vue| ^2.5.16 | [https://cn.vuejs.org/v2/guide/](https://cn.vuejs.org/v2/guide/)
>* **插入號（caret）+指定版本**：比如?1.2.2，表示安裝1.x.x的最新版本（不低于1.2.2），但是不安裝2.x.x，也就是說安裝時不改變大版本號。需要注意的是，如果大版本號為0，則插入號的行為與波浪號相同，這是因為此時處于開發階段，即使是次要版本號變動，也可能帶來程序的不兼容。
*****
例如源碼中這么一段代碼
```
<basic-container>
<avue-crud ref="crud"
:page="page"
:data="tableData"
:table-loading="tableLoading"
:option="tableOption"
@on-load="getList"
@search-change="searchChange"
@refresh-change="refreshChange"
@row-del="rowDel">
<template slot-scope="scope"
slot="menu">
<el-button type="text"
v-if="permissions.sys_log_del"
icon="el-icon-delete"
size="mini"
@click="handleDel(scope.row,scope.index)">刪除
</el-button>
</template>
</avue-crud>
</basic-container>
```
~~~
avue-前綴的標簽 如 avue-crud標簽就可以查看avue的文檔
el-前綴的標簽 如el-button 就可以查看element-ui的文檔
~~~
