avue是什么

一、Avue是啥？

Avue 是一个基于Element框架低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

二、Avue安装

安装

通过npm安装

#安装
npm i @smallwei/avue -S
yarn add @smallwei/avue -S

# 引入
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);

通过CDN安装

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"
/>
<link 
  rel="stylesheet" 
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入相关JS 文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>

<div id="app"></div>
<script>
  // 在 #app 标签下渲染一个按钮组件
  new Vue({
    el:'app',
    data(){
      return{}
    }
  });
  app.use(AVUE);
</script>

　　通过脚手架安装

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/avue 添加到依赖中即可。

　　

三、Avue使用

<template>
  <div id="app">
    <el-row style="margin-bottom:20px;font-size:15px">
      <el-col :span="4">
        显示边框:
        <el-switch size="small" v-model="showBorder"></el-switch>
      </el-col>
      <el-col :span="4">
        显示斑马纹:
        <el-switch size="small" v-model="showStripe"></el-switch>
      </el-col>
      <el-col :span="4">
        显示索引:
        <el-switch size="small" v-model="showIndex"></el-switch>
      </el-col>
      <el-col :span="4">
        显示多选框:
        <el-switch size="small" v-model="showCheckbox"></el-switch>
      </el-col>
      <el-col :span="4">
        显示表头:
        <el-switch size="small" v-model="showHeader"></el-switch>
      </el-col>
    </el-row>
    <el-row style="margin-bottom:20px">
      <el-radio-group v-model="sizeValue">
        <el-radio label="small">默认</el-radio>
        <el-radio label="medium">medium</el-radio>
        <el-radio label="small">small</el-radio>
        <el-radio label="mini">mini</el-radio>
      </el-radio-group>
    </el-row>
    <avue-crud :data="data" :option="option0"></avue-crud>
  </div>
</template>

<script>

export default {
  data() {
    return {
      obj: {},
      data: [
        {
          name: "张三",
          sex: "男"
        },
        {
          name: "李四",
          sex: "女"
        },
        {
          name: "王五",
          sex: "女"
        },
        {
          name: "赵六",
          sex: "男"
        }
      ],
      showBorder: false,
      showStripe: false,
      showHeader: true,
      showIndex: true,
      showCheckbox: false,
      showPage: false,
      sizeValue: "small"
    };
  },
  computed: {
    option0() {
      return {
        searchMenuSpan: 8,
        border: this.showBorder,
        stripe: this.showStripe,
        showHeader: this.showHeader,
        index: this.showIndex,
        size: this.sizeValue,
        selection: this.showCheckbox,
        page: this.showPage,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "姓名",
            prop: "name",
            search: true
          },
          {
            label: "性别",
            prop: "sex"
          }
        ]
      };
    }
  }
};
</script>

　　

　　运行截图

 各种操作的案例

<template>
  <div id="app">
    权限开关
    <el-switch
      :active-value="false"
      :inactive-value="true"
      v-model="text"
      active-color="#13ce66"
      inactive-color="#ff4949"
    />
    <avue-crud
      :page.sync="page"
      :data="data"
      :permission="permission"
      :option="option"
      :before-open="beforeOpen"
      @row-save="rowSave"
      @row-del="rowDel"
      @on-load="onLoad"
      @search-change="searchChange"
    >
      <template slot-scope="{row,index}" slot="menuForm">
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          plain
          v-show="type === 'add'"
        >继续添加{{index}}</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: {
        pageSize: 2,
        currentPage: 1
      },
      data: [
        {
          name: "张三",
          sex: "男",
          $cellEdit: true
        },
        {
          name: "李四",
          sex: "女"
        },
        {
          name: "王五",
          sex: "女"
        },
        {
          name: "赵六",
          sex: "男"
        }
      ],
      text: false,
      permission: {
        viewBtn: true
      },
      type: ""
    };
  },
  computed: {
    option() {
      return {
        card: true,
        tip: false,
        selection: true,
        editBtn: true,
        viewBtn: true,
        searchMenuSpan: 8,
        showHeader: true,
        index: true,
        size: "small",
        align: "center",
        menuAlign: "center",
        column: [
          {
            dicData: [{ label: "王五", value: "男" }],
            filters: true,
            filterMethod: function(value, row) {
              return row.sex === value;
            },
            sortable: true,
            label: "姓名",
            prop: "name",
            search: true,
            cell: true,
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur"
              }
            ]
          },
          {
            label: "性别",
            prop: "sex",
            formatter: function(row) {
              return row.name + "自定义";
            },
            type: "radio",
            dicData: [
              {
                label: "显示",
                value: 0
              },
              {
                label: "隐藏",
                value: 1
              }
            ]
          },
          {
            hide: true,
            cell: true,
            label: "省份",
            prop: "province",
            type: "select",
            search: true,

            props: {
              label: "name",
              value: "code"
            },
            dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
            dicFormatter: (res) => {
              // 接口设计正确就可以不用这个
              console.log(res.data)
              return res.data
            },
            rules: [
              {
                required: true,
                message: "请选择省份",
                trigger: "blur"
              }
            ]
          }
        ]
      };
    }
  },
  methods: {
    onLoad(page) {
      console.log("分页信息:", page);
      this.page.total = 100;
    },
    searchChange(params, done) {
      console.log("--params", params);
      setTimeout(() => {
        done();
      }, 2000);
    },
    rowSave(form, done) {
      this.$message.success("新增数据" + JSON.stringify(form));
      done();
    },
    beforeOpen(done, type) {
      this.type = type;
      done();
    },
    rowDel() {
      this.$message.success('del')
    }
  },
  watch: {
    text() {
      if (this.text === true) {
        this.permission.viewBtn = false;
      } else {
        this.permission.viewBtn = true;
      }
    }
  }
};
</script>

　　

四、Avue优/缺点

优点：

1.仅需一个json自动生成增删改查页面

2.结合业务快速化开发，节约开发时间成本

缺点:

1.大量定制 UI

JSON 配置使得 Avue 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 Avue 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。

2.极为复杂或特殊的交互

有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 Avue。

五、总结

如果只是内部使用的管理系统 or OA系统，可以使用Avue进行开发，涉及到的自定义组件无需过多。如果是对外的大型管理系统，有特殊定制化的项目，可以结合Avue使用，毕竟它可以让开发者减少很多工作量。