# 前端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的文档
~~~