Avue是基于Vue.js和element的快速開發(fā)框架 它的核心是數(shù)據(jù)驅動UI的思想，讓我們從繁瑣的crud開發(fā)中解脫出來，它的寫法類似easyUI，但是寫起來比easyui更容易，因為它是基礎數(shù)據(jù)雙向綁定以及其他vue的特性。同時不知局限于crud，它還有我們經(jīng)常用的一些組件例如，表單，數(shù)據(jù)展示卡，人物展示卡等，更多的組件還在開發(fā)。

Avue.js是基于現(xiàn)有的element-ui庫進行的二次封裝，簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅動視圖,主要的組件庫針對table表格和form表單場景，同時衍生出更多企業(yè)常用的組件，達到高復用，容易維護和擴展的框架，同時內置了豐富了數(shù)據(jù)展示組件，讓開發(fā)變得更加容易。
官網(wǎng)地址：https://avuejs.com/
github地址：https://github.com/nmxiaowei/avue

一、背景

最近公司在開發(fā)云運維相關的系統(tǒng)，前端采用的技術框架是vue-cli3+vuex+aixos+element +avue。起初是沒有想到用Avuejs，畢竟使用element-ui也適合大部分場景開發(fā)。隨著開發(fā)進度的進行，發(fā)現(xiàn)element對table的封裝不夠，數(shù)據(jù)展示方面也沒有那么優(yōu)秀。本來是打算自己封裝table，此時突然想起，Avuejs其實也是對element的二次封裝，特別是table模塊和數(shù)據(jù)展示模塊，恰好可以補足element這方面的短板。

想看avue的具體文檔，請查看官網(wǎng)：Avue官網(wǎng)

二、項目中的運用

1、引入

vue-cli3腳手架創(chuàng)建的項目，都有一個src文件夾，在src下創(chuàng)建一個plugins文件夾，專門用于引入項目需要的插件，比如element、avue等。主要是減少main.js的代碼，簡化代碼結構，便于管理插件。

先npm下載依賴：

npm i @smallwei/avue --save

在plugins文件夾下面創(chuàng)建一個js文件：avue.js:

import Vue from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/lib/index.css'
Vue.use(Avue)

然后再主入口文件main.js引入

import './plugins/avue'

然后就可以進行全局使用了

2、table（avue-crud）的使用

以下是代碼展示：

先在template中貼入代碼：

<avue-crud
      ref="crud"
      :data="data"
      :option="option"
      :page.sync="page"
      :table-loading="loading"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot="menu" slot-scope="scope">
        <el-button
          size="mini"
          @click.native="update(scope.row)"
        >編輯
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click.native="remove(scope.row)"
        >刪除
        </el-button>
      </template>
    </avue-crud>

然后在data中添加配置項：

data() {
    return {
      page: {
        pageSizes: [10, 20, 30, 40], // 默認
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      data: [],
      loading: false,
      option: {
        emptyText: '暫無數(shù)據(jù)',
        columnBtn: false,//刪掉自帶的列顯隱按鈕
        refreshBtn: false,//刪掉自帶的刷新按鈕
        addBtn: false,// 刪掉自帶的添加按鈕
        delBtn: false,// 刪掉自帶的刪除按鈕
        editBtn: false,// 刪掉自帶的編輯按鈕
        border: true,
        stripe: true,
        selection: false,
        align: 'center',
        menuAlign: 'center',
        menuWidth: 200,
        column: [
          {
            label: '角色名稱',
            prop: 'name'
          },
          {
            label: '說明',
            prop: 'desc'
          }
        ]
      }
    }
  }

想要看更多的參數(shù)意思和配置，可以登錄avue的官網(wǎng)查看。之所以將一些自帶的按鈕和查詢框框刪掉，是因為這些要自己根據(jù)實際需求，進行自定義。還有就是，始終覺得，一個框架封裝的越完善，其實對開發(fā)者越不利，因為這樣表示開發(fā)者自己發(fā)揮的空間變小，同時也代表適用范圍變小了。在處理實際問題過程中，往往是要靈活多變的。

以下是項目效果圖，數(shù)據(jù)變多時，會顯示分頁按鈕：

三、使用想法

市面上有很多封裝好的插件，比如boostrap-vue，iview等，這些都只是工具?；A還是對es6的掌握和vue的掌握。在開發(fā)的過程中，可以根據(jù)自己現(xiàn)有的基礎，決定使用哪個工具，來提高自己的開發(fā)效率。之所以選擇auvejs，是因為項目本身用了element-ui，avue是對element的二次封裝，并且對table和數(shù)據(jù)展示的組件封裝的很好，省去了自己手動封裝的時間。如果項目開發(fā)時間充足，建議可以自己封裝，往往更適合項目。

到此這篇關于vue項目中使用AvueJs的文章就介紹到這了,更多相關vue 使用AvueJs內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論