快捷導(dǎo)航

在Vue中使用Avue、配置過程及實(shí)際應(yīng)用小結(jié)

更新時(shí)間：2022年10月10日 14:11:47 作者：架構(gòu)師全棧之路

在項(xiàng)目中遇到通過點(diǎn)擊加號(hào)實(shí)現(xiàn)輸入框的增加、以及對(duì)該輸入框的輸入內(nèi)容進(jìn)行驗(yàn)證，通過這些誘導(dǎo)因素創(chuàng)作的這篇文章，本文重點(diǎn)給大家介紹在Vue中使用Avue、配置過程以及實(shí)際應(yīng)用,需要的朋友可以參考下

1、使用Avue的原因

在項(xiàng)目中遇到通過點(diǎn)擊加號(hào)實(shí)現(xiàn)輸入框的增加、以及對(duì)該輸入框的輸入內(nèi)容進(jìn)行驗(yàn)證。有感而發(fā)

2、Avue的官網(wǎng)

官網(wǎng)地址：https://avuejs.com/

3、安裝使用

可以直接根據(jù)官網(wǎng)的教程來

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

3.1 安裝

npm i @smallwei/avue -S

我安裝的是這個(gè)版本的avue。默認(rèn)會(huì)安裝最新的版本、安裝最新的可能會(huì)遇到版本不兼容問題（我就是遇到了這個(gè)鬼問題、程序都啟動(dòng)不成功了?？梢赃x擇安裝指定的版本npm i @smallwei/avue@2.8.27 -S）

3.2 在main.js中引入

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

4 使用Avue組件庫(kù)

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

4.1 基本樣式

4.2 實(shí)際應(yīng)用

就是將組件的代碼復(fù)制粘貼到你想要放置的代碼位置

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