vue項目中使用AvueJs的詳細教程
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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Pycharm中開發(fā)vue?element項目時eslint的安裝和使用步驟
這篇文章主要介紹了Pycharm中開發(fā)vue?element項目時eslint的安裝和使用,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動的方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08利用Vue+intro.js實現(xiàn)頁面新手引導流程功能
在同學們使用某些網(wǎng)站的新版本頁面的時候,經(jīng)常會出現(xiàn)一個類似于新手引導一樣的效果,來幫助同學們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關于如何利用Vue+intro.js實現(xiàn)頁面新手引導流程功能的相關資料,需要的朋友可以參考下2023-11-11