01AVue入门(持续学习中)

1.使用AVue开发简单的前端页面直接简单到起飞,他是Element Plus+Vue+Vite开发的,不需要向元素的前端代码一样一个组件要传很多参数,他可以使用Json文本来控制我们要传入的数据结构来决定显示什么
//我使用的比较新,我们也可以使用cdn直接使用script标签直接引入

2.开发中遇到的坑,由于我的电脑有很多前端项目,版本冲突不断上演,所以需要使用nvm进行统一的node和npm版本管理,其中我遇到了坑
参考文章 https://www.jianshu.com/p/13c0b3ca7c71

1.必须要彻底删除node
2.nvm安装目录和nodejs目录不能一样
3.先install 后use
4.安装淘宝进行加快安装

npm config set registry https://registry.npm.taobao.org

3.官网下载项目

https://gitee.com/smallweigit/avue-cli

# 克隆项目
git clone https://gitee.com/smallweigit/avue-cli.git# 进入项目
cd avue-cli# 安装依赖
npm install --registry=https://registry.npm.taobao.org# 启动服务
npm run serve

4.推荐一个CDN线上链接
http://www.bootcdn.cn

5.官网
https://v2.avuejs.com/docs/installation/
6.使用avue3进行增删改查

<template><basic-container><div><el-tag>page:{{page}}</el-tag></div><div><el-tag>search:{{search}}</el-tag></div><div><el-tag>form:{{form}}</el-tag></div><avue-crud @on-load="onLoad"v-model="form"v-model:search="search"v-model:page="page"@row-save="rowSave"@row-update="rowUpdate"@row-del="rowUpdate":option="option":data="tableData"></avue-crud></basic-container>
</template>
<script setup name="setup">
const data = reactive({tableData: [],option: {index: true,border: true,selection: true,rowKey: 'id',column: [{label: '姓名',prop: 'name',search: true,rules: [{required: true,message: '请输入姓名',trigger: 'blur'}]},{label: '年龄',prop: 'age',type: 'select',dicData:[{label: "废除",value: "0",},{label: "启用",value: "1",}],}]},search: {},form: {},page: {total: 20}
})
const { tableData, option, form, page, search } = toRefs(data);
function onLoad () {//在这里发起请求就可以了并且更新页数和每页大小if (page.value.currentPage == 1) {tableData.value = [{id: 1,name: '1-smallwei'}]} else {tableData.value = [{id: 1,name: '2-smallwei'}]}
}
function rowDel (row, index, done) {done(row)
}
function rowUpdate (row, index, done, loading) {done(row)
}
function rowSave (row, done, loading) {row.id = new Date().getTime()done(row)
}
</script>

7.js文件不能大写, src目录是指 @/
vue3怎么引入文件

import genderOptions from '@/qqabc.js';  
const data = reactive({genderOptions,//引入{label: '年龄',prop: 'age',type: 'select',dicData:genderOptions}
//qqabc.js文件放在src文件夹中
const jd=[{"label" :"aa",},{"label" :"bb",}
];
export default jd; //名字后面可以改