欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目中使用AvueJs的詳細(xì)教程

 更新時(shí)間:2022年10月10日 15:11:24   作者:騎魚(yú)的少年  
Avue.js是基于現(xiàn)有的element-ui庫(kù)進(jìn)行的二次封裝,簡(jiǎn)化一些繁瑣的操作,核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫(kù)針對(duì)table表格和form表單場(chǎng)景,這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧

Avue是基于Vue.js和element的快速開(kāi)發(fā)框架 它的核心是數(shù)據(jù)驅(qū)動(dòng)UI的思想,讓我們從繁瑣的crud開(kāi)發(fā)中解脫出來(lái),它的寫(xiě)法類(lèi)似easyUI,但是寫(xiě)起來(lái)比easyui更容易,因?yàn)樗腔A(chǔ)數(shù)據(jù)雙向綁定以及其他vue的特性。同時(shí)不知局限于crud,它還有我們經(jīng)常用的一些組件例如,表單,數(shù)據(jù)展示卡,人物展示卡等,更多的組件還在開(kāi)發(fā)。

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

一、背景

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

想看avue的具體文檔,請(qǐng)查看官網(wǎng):Avue官網(wǎng)

二、項(xiàng)目中的運(yùn)用

1、引入

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

先npm下載依賴(lài):

npm i @smallwei/avue --save

在plugins文件夾下面創(chuàng)建一個(gè)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'

然后就可以進(jìn)行全局使用了

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中添加配置項(xiàng):

data() {
    return {
      page: {
        pageSizes: [10, 20, 30, 40], // 默認(rèn)
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      data: [],
      loading: false,
      option: {
        emptyText: '暫無(wú)數(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: '角色名稱(chēng)',
            prop: 'name'
          },
          {
            label: '說(shuō)明',
            prop: 'desc'
          }
        ]
      }
    }
  }

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

以下是項(xiàng)目效果圖,數(shù)據(jù)變多時(shí),會(huì)顯示分頁(yè)按鈕:

在這里插入圖片描述

三、使用想法

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

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

相關(guān)文章

  • Pycharm中開(kāi)發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用步驟

    Pycharm中開(kāi)發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用步驟

    這篇文章主要介紹了Pycharm中開(kāi)發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-05-05
  • vue watch深度監(jiān)聽(tīng)對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果

    vue watch深度監(jiān)聽(tīng)對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果

    這篇文章主要介紹了vue watch深度監(jiān)聽(tīng)對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • 如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn)

    如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn)

    本文主要介紹了如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • Vue之ref屬性詳解

    Vue之ref屬性詳解

    這篇文章主要為大家介紹了Vue之ref屬性,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助
    2021-11-11
  • Vue入門(mén)之?dāng)?shù)據(jù)綁定(小結(jié))

    Vue入門(mén)之?dāng)?shù)據(jù)綁定(小結(jié))

    本篇文章主要介紹了探索Vue高階組件的使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • vue3中的透?jìng)鱝ttributes教程示例詳解

    vue3中的透?jìng)鱝ttributes教程示例詳解

    這篇文章主要為大家介紹了vue3中的透?jìng)鱝ttributes教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能

    利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能

    在同學(xué)們使用某些網(wǎng)站的新版本頁(yè)面的時(shí)候,經(jīng)常會(huì)出現(xiàn)一個(gè)類(lèi)似于新手引導(dǎo)一樣的效果,來(lái)幫助同學(xué)們更好的熟悉新版本頁(yè)面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • vue3-HOOKS模塊化處理方式

    vue3-HOOKS模塊化處理方式

    這篇文章主要介紹了vue3-HOOKS模塊化處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 分享幾個(gè)可以助你提高效率的Vue指令

    分享幾個(gè)可以助你提高效率的Vue指令

    vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡(jiǎn)單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個(gè)可以助你提高效率的Vue指令,需要的朋友可以參考下
    2022-05-05
  • 詳解vue-cli構(gòu)建項(xiàng)目反向代理配置

    詳解vue-cli構(gòu)建項(xiàng)目反向代理配置

    本篇文章主要介紹了詳解vue-cli構(gòu)建項(xiàng)目反向代理配置,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09

最新評(píng)論