Avue - 更加貼合企業開發的數據驅動前端開發框架

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/YdlRKI0Kgx4JKH596ShL5A

猜你喜歡