avue是什么

2023-10-10 23:43:58

一、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>

　　运行截图

四、Avue优/缺点

优点：

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

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

缺点:

1.大量定制 UI

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

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

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

五、总结

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

码农公寓