在Vue中使用Avue、配置過程以及實際應用

在新項目中用到一個新的小玩意、還挺不錯的、立馬安裝使用到自己的項目中。哈哈哈

1、使用Avue的原因

在項目中遇到通過點選加号實作輸入框的增加、以及對該輸入框的輸入内容進行驗證。有感而發

2、Avue的官網

官網位址：​​https://avuejs.com/​​

3、安裝使用

可以直接根據官網的教程來

以下介紹我成功安裝的案例

3.1 安裝

npm i @smallwei/avue -S      

我安裝的是這個版本的avue。預設會安裝最新的版本、安裝最新的可能會遇到版本不相容問題（我就是遇到了這個鬼問題、程式都啟動不成功了。可以選擇安裝指定的版本​

​npm i @smallwei/[email protected] -S​

​）

3.2 在main.js中引入

// 引入
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue)      

4 使用Avue元件庫

樣式是多的很、感覺可不賴。愛了愛了

4.1 基本樣式

4.2 實際應用

<template>
  <div>
    <p>這裡是管理者資訊界面</p>
    <hr />
    <avue-crud :data="data" :option="option"></avue-crud>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          name: "張三",
          sex: "男",
        },
        {
          name: "李四",
          sex: "女",
        },
      ],
      option: {
        border: true,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "性别",
            prop: "sex",
          },
        ],
      },
    };
  },
};
</script>
      

4.3 效果