vue项目中使用AvueJs的详细教程
Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想，让我们从繁琐的crud开发中解脱出来，它的写法类似easyUI，但是写起来比easyui更容易，因为它是基础数据双向绑定以及其他vue的特性。同时不知局限于crud，它还有我们经常用的一些组件例如，表单，数据展示卡，人物展示卡等，更多的组件还在开发。
Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。
官网地址：https://avuejs.com/
github地址：https://github.com/nmxiaowei/avue
一、背景
最近公司在开发云运维相关的系统，前端采用的技术框架是vue-cli3+vuex+aixos+element +avue。起初是没有想到用Avuejs，毕竟使用element-ui也适合大部分场景开发。随着开发进度的进行，发现element对table的封装不够，数据展示方面也没有那么优秀。本来是打算自己封装table，此时突然想起，Avuejs其实也是对element的二次封装，特别是table模块和数据展示模块，恰好可以补足element这方面的短板。
想看avue的具体文档，请查看官网：Avue官网
二、项目中的运用
1、引入
vue-cli3脚手架创建的项目，都有一个src文件夹，在src下创建一个plugins文件夹，专门用于引入项目需要的插件，比如element、avue等。主要是减少main.js的代码，简化代码结构，便于管理插件。
先npm下载依赖：
npm i @smallwei/avue --save
在plugins文件夹下面创建一个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: '暂无数据',
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'
}
]
}
}
}
想要看更多的参数意思和配置，可以登录avue的官网查看。之所以将一些自带的按钮和查询框框删掉，是因为这些要自己根据实际需求，进行自定义。还有就是，始终觉得，一个框架封装的越完善，其实对开发者越不利，因为这样表示开发者自己发挥的空间变小，同时也代表适用范围变小了。在处理实际问题过程中，往往是要灵活多变的。
以下是项目效果图，数据变多时，会显示分页按钮：
三、使用想法
市面上有很多封装好的插件，比如boostrap-vue，iview等，这些都只是工具。基础还是对es6的掌握和vue的掌握。在开发的过程中，可以根据自己现有的基础，决定使用哪个工具，来提高自己的开发效率。之所以选择auvejs，是因为项目本身用了element-ui，avue是对element的二次封装，并且对table和数据展示的组件封装的很好，省去了自己手动封装的时间。如果项目开发时间充足，建议可以自己封装，往往更适合项目。
到此这篇关于vue项目中使用AvueJs的文章就介绍到这了,更多相关vue 使用AvueJs内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Pycharm中开发vue element项目时eslint的安装和使用步骤
这篇文章主要介绍了Pycharm中开发vue element项目时eslint的安装和使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue watch深度监听对象实现数据联动的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
本文主要介绍了如何在vuejs项目中使用md5加密密码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了Vue之ref属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助，希望能够给你带来帮助2021-11-11
本篇文章主要介绍了探索Vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了vue3中的透传attributes教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue3-HOOKS模块化处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架,下面这篇文章主要给大家分享介绍了几个可以助你提高效率的Vue指令,需要的朋友可以参考下2022-05-05
本篇文章主要介绍了详解vue-cli构建项目反向代理配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论