Avue的简单使用

简介

Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。

环境

1. 基于vue脚手架创建一个项目

   npm install -g @vue/cli

   vue create avue-test

2. 由于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')

3. 安装avue

   # 安装
   yarn add  @smallwei/avue -S 
   # 或者：npm i @smallwei/avue -S

4. 引入

   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')

5. 使用

   <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>

6. 效果