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>
运行截图
四、Avue优/缺点
优点:
1.仅需一个json自动生成增删改查页面
2.结合业务快速化开发,节约开发时间成本
缺点:
1.大量定制 UI
JSON 配置使得 Avue 更适合做有大量常见 UI 组件的页面,但对于面向普通客户(toC)的页面,往往追求个性化的视觉效果,这种情况下用 Avue 就不合适,实际上绝大部分前端 UI 组件库也都不适合,只能定制开发。
2.极为复杂或特殊的交互
有些复杂的前端功能,比如 可视化编辑器,其中有大量定制的拖拽操作,这种需要依赖原生 DOM 实现的功能无法使用 Avue。
五、总结
如果只是内部使用的管理系统 or OA系统,可以使用Avue进行开发,涉及到的自定义组件无需过多。如果是对外的大型管理系统,有特殊定制化的项目,可以结合Avue使用,毕竟它可以让开发者减少很多工作量。
标签:name,什么,smallwei,sex,avue,安装,Avue 来源: https://www.cnblogs.com/doudoujs/p/15894927.html