vlambda博客
学习文章列表

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 访问到所有组件:

<!-- 引入样式文件 -->
<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>

在新项目中使用 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-form v-model="form" :option="option" ></avue-form>

<script>
export default {
 data() {
 return {
 form: {
 cascader:[0,1],
 tree:0
 },
 option:{
 column:[{
 ...
 }]
 }
 }
}
</script>

◆ 总结

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

来源：

https://www.toutiao.com/article/7083462713355190821/?log_from=ad2e0caedf34c_1649312650696

 IT大咖说  |  关于版权 

感谢您对IT大咖说的热心支持！