简介
Avue.js是基于现有的element-ui
库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易。
环境
-
基于vue脚手架创建一个项目
npm install -g @vue/cli
vue create avue-test
-
由于avue是基于element ui 的。因此,使用之前,需安装element ui
npm i element-ui -S
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
-
安装avue
# 安装 yarn add @smallwei/avue -S # 或者:npm i @smallwei/avue -S
-
引入
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import Avue from '@smallwei/avue' import '@smallwei/avue/lib/index.css' import App from './App.vue' Vue.use(ElementUI) Vue.use(Avue) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
-
使用
<template> <div id="app"> <avue-crud :data="data" :option="option" v-model="form"></avue-crud> </div> </template> <script> export default { data() { return { form: {}, data: [ { name: "张三", sex: "男", }, { name: "李四", sex: "女", } ], option: { align: "center", menuAlign: "center", column: [ { label: "姓名", prop: "name", }, { label: "性别", prop: "sex", }, ], }, }; }, }; </script> <style> </style>
-
效果