百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

Avue - 更加贴合企业开发的数据驱动前端开发框架

csdh11 2025-02-26 11:41 16 浏览

Vue 作为最为广泛使用的前端开发框架之一,拥有许多的组件库,但他们通常提供较为基本的组件,应用到业务上往往还需要大量的封装。Avue,基于 element-ui / element-plus,提供了数据驱动视图的二次封装,目标是简化开发工作。

简介

Avue,是 smallweigit 在 Gitee 上开源的基于 Vue 的前端开发框架,仓库位于
https://gitee.com/smallweigit/avue,目前提供了基于 Vue 2.x 的 v2.9.4 版本和基于 Vue 3.x 的 v3.0.4 版本。

Avue 基于 Vue,2.x 版本基于 Vue 2 的 element-ui 组件库,3.x 版本基于 Vue 3 的 element-plus 组件库。Avue 基于现有的组件库进行了二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对 table 表格和 form 表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易。


使用

Avue 易用灵活,对于已掌握 Vue element-ui / element-plus 的开发者而言,能够马上上手使用;拥有丰富组件,包含了大量的常用组件库以及插件库;Avue 高效兼容,兼容现在主流的浏览器,使用开箱即用的插件引入模式。

在现有项目中使用 Avue 时,可以通过 npm 或 yarn 进行安装:

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

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

使用字典需要引入axios:

import axios from 'axios'
Vue.use(Avue,{axios})

使用 Avue 最简单的方法是直接在 html 文件中引入 CDN 链接(引入的是最新的Avue版本,当然你也可以制定版本号),之后你可以通过全局变量 AVUE 访问到所有组件:









在新项目中使用 Avue 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Avue:

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

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

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

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


在引入 Avue 时,可以传入一个全局配置对象。该对象目前支持:

  • size:用于改变组件的默认尺寸,属性的组件的默认尺寸均为 small。可选值small/mini/medium;
  • menuType:用于改变操作栏菜单按钮类型性,属性的组件的默认尺寸均为 text。可选值button/icon/text/menu
  • theme 主题颜色配置,属性的组件的默认白色。可选值 dark;
  • qiniu 七牛云配置
  • ali 阿里云配置
  • canvas全局水印配置


Avue 提供了大量的二次封装组件,能够很方便地应用到业务中,如 inputTree 树型输入组件:

数组输入组件,能够动态输入多个元素:

Avue 还提供了强大的组合组件,如 Form 表单组件:

其提供了如数据验证、数据字典、数据类型、数据过滤、防重提交等高级特性:




总结

Avue 基于 Vue 2 的 element-ui 组件库和 Vue 3 的 element-plus 组件库,进行了二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,衍生出更多企业常用的组件,高复用,容易维护和扩展的框架,内置了丰富了数据展示组件,大大简化了开发工作。

相关推荐

全能硬件大师AIDA64 v4.60 最新绿色版下载

IT之家(www.ithome.com):全能硬件大师AIDA64v4.60最新绿色版下载今天,国外FinalWire公司正式发布全能系统硬件大师AIDA64v4.60最新版。本次新版加入14款...

2023年4款Mac软件推荐,绝不失望(mac2020i3)

1.VDown-免费下载视频是最近mac上出现的免费的视频下载软件,支持超过900多个站点,虽然看上去支持的站点略少于Downie,但是熟悉的网站B站,Youku全部都有,国外的站点,只要有办法访问...

实验设计和数据分析必不可少的Design-expert,谁还不会用呢?

Design-Expert软件介绍...

关于视频格式的那些事儿(视频格式作用)

闲暇之余,相信很多人的选择就是看视频。电视剧、综艺、手机短视频,总有一款适合你。然而播放这些视频时,你是否注意到了文件名后各种各样的后缀名了呢?是否会好奇为什么会存在这么多视频格式?不同的格式是不是影...

机器人学习也要提速提质!智元机器人发布首个通用具身基座大模型

去年已实现量产近千台的人形机器人公司智元机器人再度对外宣布重磅消息。3月10日,该公司正式发布首个通用具身基座大模型,即智元启元大模型(GenieOperator-1)。“GO-1大模型借助人类和多...

软网推荐:硬盘管理用好Macrorit Partition Expert

平时我们经常需要对硬盘进行管理,比如为了释放空间,需要将隐藏分区删除并重建分区;出于隐私保护,需要彻底删除硬盘分区上的数据;硬盘出现坏道需要将其屏蔽等等。诸如此类的操作,现在借助免费且图形化操作的分区...

Design-Expert 12.0 安装教程(附安装包下载)

Design-Expert12.0软件介绍是一款由Stat-EaseInc开发的专用于执行实验设计(DOE)的软件。它提供比较测试、筛选、表征、优化、稳健的参数设计、混合物设计和组合设计等功能,并...

不用在PLC内编程,实现西门子与罗克韦尔(AB)PLC之间数据通讯

巨控NET400数据网关支持多种PLC之间、PLC与智能仪表之间多对多通讯,支持以太网,串口设备混合数据交换;无需PLC内编程开发,只需在智能网关的参数管理软件上配置数据的起始地址和数量即可,支持热插...

S7-1500PLC做OPC UA通信服务器(s7-1200 opc ua)

OPCUA概述OPCUA是一项开放标准,适用于从机器到机器间(M2M)的水平通信和从机器直到云端的垂直通信。该标准独立于供应商和平台,支持广泛的安全机制,并且可以与PROFINET共享同一工...

WINCC配置OPC UA服务器的步骤和故障解决

WINCC配置OPCUA服务器的步骤和故障解决本次配置实例的环境:在同一局域网内的两台计算机,均为windows7SP1系统一台计算机安装wincc7.4,并建立项目,项目在运行状态一台计算机安...

视频格式在线转换,五种超实用的视频格式转换工具!

视频内容无处不在,从教育课程到娱乐电影,从社交媒体分享到在线会议,视频已成为我们日常生活中不可或缺的一部分。然而,不同的设备和平台支持的视频格式各异,会导致视频文件在某些设备上无法播放。因此,掌握视频...

支持裸眼3D:长虹X1手机/全新CHIQ电视发布

IT之家讯10月16日消息国产传统家电品牌长虹此前也一直有智能手机产品,但关注度并不高。今天下午,长虹举行发布会,发布了两款以裸眼3D技术为卖点的产品,分别为长虹X1手机和全新CHIQ曲面电视。长...

h265和h264有什么区别(h265和h264有什么区别)

目前很多摄像机采用了H.265的编码标准,H.264编码的摄像机逐渐减少,为什么H.265会流行?H.264和H.265有何不同?一、什么是H.265...

中文白皮书:面向视频编解码器和图形引擎的前沿多媒体方案 WP497

该白皮书探讨了ZynqUltraScale+MPSoC的多媒体功能。MPSoC基于Zynq-7000SoC,包括一个可编程逻辑(PL)的桥接处理系统(PS),但它在ZynqUltr...

科达NVR家族换新装:推出首款通用型H.265+4K NVR

近期,科达推出业内首款通用型H.265+4KNVR——NVR1821,吹响NVR家族全面升级的号角。据了解,保持原有通用型产品“高性价比”定位的基础上,全新NVR1821系列增加了4路4K解码+1路...