在Vue中使用Avue、配置過程及實(shí)際應(yīng)用小結(jié)
在新項(xiàng)目中用到一個(gè)新的小玩意、還挺不錯(cuò)的、立馬安裝使用到自己的項(xiàng)目中。哈哈哈
1、使用Avue的原因
在項(xiàng)目中遇到通過點(diǎn)擊加號實(shí)現(xiàn)輸入框的增加、以及對該輸入框的輸入內(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)會安裝最新的版本、安裝最新的可能會遇到版本不兼容問題（我就是遇到了這個(gè)鬼問題、程序都啟動不成功了?？梢赃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組件庫
樣式是多的很、感覺可不賴。愛了愛了
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>4.3 效果
到此這篇關(guān)于在Vue中使用Avue、配置過程以及實(shí)際應(yīng)用的文章就介紹到這了,更多相關(guān)Vue使用Avue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vant的日歷組件,在iPhonex上可選日期空白
這篇文章主要介紹了關(guān)于vant的日歷組件,在iPhonex上可選日期空白，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue數(shù)組對象排序的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue數(shù)組對象排序的實(shí)現(xiàn)代碼，這里整理了詳細(xì)的代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-06-06
基礎(chǔ)的前端vite項(xiàng)目創(chuàng)建過程詳解
這篇文章主要介紹了如何使用Vite創(chuàng)建一個(gè)前端項(xiàng)目,并配置了Vue?Router、Vuex、Element?Plus、Axios和Element?Plus圖標(biāo)等第三方依賴,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
vue 中動態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動態(tài)綁定class 和 style的方法，通過實(shí)例結(jié)合的形式給大家接受的非常詳細(xì)，需要的朋友參考下吧2018-06-06
element?ui組件中element.style怎么改詳解
element.style是一種內(nèi)聯(lián)樣式,一般都是代碼里寫死的,下面這篇文章主要給大家介紹了關(guān)于element?ui組件中element.style怎么改的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue+element-ui監(jiān)聽滾動實(shí)現(xiàn)錨點(diǎn)定位方式(雙向),錨點(diǎn)問題
這篇文章主要介紹了vue+element-ui監(jiān)聽滾動實(shí)現(xiàn)錨點(diǎn)定位方式(雙向),錨點(diǎn)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue入口文件index.html緩存的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了基于vue實(shí)現(xiàn)探探滑動組件功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05