?avue的使用
最近做的項目中接觸到了一個新的框架感覺很好用所以推薦給大家~~

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

這個簡直太好用了，一套crud只需要一行代碼就解決啦
1、【npm安裝】

npm i @smallwei/avue -S
1
在min.js頁面引入下方代碼

import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
1
2
3
這里提醒大家一下不要忘記安裝 element-ui【官網地址】
【cdn方式】

//在index.html引入avuex的包
avue.min.js為壓縮混淆包
avue.js為沒有壓縮混淆的包
<link rel="stylesheet" href="/lib/index.css" />
<script src="/lib/avue.min.js"></script>

//在main.js中使用
Vue.use(window.AVUE);
1
2
3
4
5
6
7
8
下面是一個簡單地crud

<template>
? <div>
? ? <avue-crud :data="data" :option="option" v-model="obj"
? ? ? ? ? ? ? ?@row-del="rowDel" @row-save="handleRowSave"
? ? ? ? ? ? ? ?@row-update="handleRowUpdate"></avue-crud>
? </div>
</template>

<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? obj:{},
? ? ? ? data: [{
? ? ? ? ? ? name:'張三',
? ? ? ? ? ? sex:'男',
? ? ? ? ? ? date:'1994-02-23 00:00:00'
? ? ? ? ? }, {
? ? ? ? ? ? name:'李四',
? ? ? ? ? ? sex:'女',
? ? ? ? ? ? date:'1994-02-23 00:00:00'
? ? ? ? ? }, {
? ? ? ? ? ? name:'王五',
? ? ? ? ? ? sex:'女',
? ? ? ? ? ? date:'1994-02-23 00:00:00'
? ? ? ? ? }, {
? ? ? ? ? ? name:'趙六',
? ? ? ? ? ? sex:'男',
? ? ? ? ? ? date:'1994-02-23 00:00:00'
? ? ? ? ? }],
? ? ? ? option:{
? ? ? ? ? title:'表格的標題',
? ? ? ? ? page:false,
? ? ? ? ? align:'center',
? ? ? ? ? menuAlign:'center',
? ? ? ? ? column:[
? ? ? ? ? ? {
? ? ? ? ? ? ? label:'姓名',
? ? ? ? ? ? ? prop:'name'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? label:'性別',
? ? ? ? ? ? ? prop:'sex'
? ? ? ? ? ? },{
? ? ? ? ? ? ? label: "日期",
? ? ? ? ? ? ? prop: "date",
? ? ? ? ? ? ? type: "date",
? ? ? ? ? ? ? format: "yyyy-MM-dd hh:mm:ss",
? ? ? ? ? ? ? valueFormat: "yyyy-MM-dd hh:mm:ss",
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? }
? ? ? }
? ? },
? ? methods: {
? ? ? // 增加按鈕
? ? ? handleRowSave(row,done,loading) {
? ? ? ? this.data.splice(0, 0, row);
? ? ? ? done(); ?// 關閉表單
? ? ? ? loading(); // 按鈕停止加載
? ? ? },
? ? ? // 修改按鈕
? ? ? handleRowUpdate(row,index,done,loading) {
? ? ? ? this.data.splice(index, 1, row);
? ? ? ? done(); ?// 關閉表單
? ? ? ? loading(); // 按鈕停止加載
? ? ? },
? ? ? // 刪除按鈕
? ? ? rowDel(row, index) {
? ? ? ? this.$confirm('是否刪除該條信息？', '提示', {
? ? ? ? ? confirmButtonText: '確定',
? ? ? ? ? cancelButtonText: '取消',
? ? ? ? ? type: 'warning'
? ? ? ? }).then(() => {
? ? ? ? ? this.data.splice(index, 1);
? ? ? ? });
? ? ? },
? ? },
? }
</script>

?

總結

以上是生活随笔為你收集整理的avue的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。