我们一起来学习vue3

这是我学习vue3做的一个demo,功能实现了增删查改。是演示效果，没有真正与数据库打交道。

做这个demo的过程中，我遇到了几个问题。还好一一解决了。所以我觉得必要分享出来。

给各位像我一样的新手。少浪费一些时间，多学习一些新知识。

我也是参考博客园一些人的文章，开始学的。

先看看效果。

整体效果，上面两个导航按钮，

中间搜索框，操作按钮。

下面是内容，有修改，有删除。

看看查询的

还可以吧

再看看修改的。

 修改成功了

在来看看删除的。

 只有一条了

再看看新增的

现在看看项目结构

现在开始看代码

product页面

自定义组件页面

最小组件

数据

let data={
    "version": 0,
    "timestamp": 1640827793378,
    "sign": null,
    "total": 12,
    "size": 10,
    "current": 1,
    "pages": 2,
    "resultStateVo": {
        "code": 200,
        "msg": "操作成功"
    },
    "rows": [{
            "productModelCode": "xm_cp_bm_001",
            "productModelName": "小明产品型号001",
            "productCode": "xm_bm_001",
            "productName": "小明产品001",
            "description": null,
            "createTime": "2021-12-13 18:05:39",
            "creatorId": "104",
            "updateTime": null,
            "updateId": null
        }, {
            "productModelCode": "hao",
            "productModelName": "车海洋洗车中心",
            "productCode": "bm001",
            "productName": "编码001",
            "description": "test888",
            "createTime": "2021-12-09 16:23:48",
            "creatorId": "1",
            "updateTime": "2021-12-10 17:38:51",
            "updateId": "1"
        }, {
            "productModelCode": "chy_001",
            "productModelName": "车海洋001号",
            "productCode": "bm001",
            "productName": "编码001",
            "description": "666sss",
            "createTime": "2021-12-03 09:26:48",
            "creatorId": "1",
            "updateTime": "2021-12-10 17:37:21",
            "updateId": "1"
        }, {
            "productModelCode": "chy_five_wash",
            "productModelName": "五代+",
            "productCode": "hello",
            "productName": "测试111",
            "description": "一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。",
            "createTime": "2021-10-22 15:54:06",
            "creatorId": "1",
            "updateTime": "2021-12-02 16:43:50",
            "updateId": "1"
        }, {
            "productModelCode": "chy_one_tow_three",
            "productModelName": "一拖三",
            "productCode": "chy_product",
            "productName": "车海洋产品666",
            "description": "测试",
            "createTime": "2021-10-22 15:53:44",
            "creatorId": "1",
            "updateTime": "2021-12-07 14:41:58",
            "updateId": "1"
        }, {
            "productModelCode": "chy_water",
            "productModelName": "加水机",
            "productCode": "chy_product",
            "productName": "车海洋产品666",
            "description": "测试",
            "createTime": "2021-10-22 15:53:26",
            "creatorId": "1",
            "updateTime": null,
            "updateId": null
        }, {
            "productModelCode": "chy_digital",
            "productModelName": "数码洗车机",
            "productCode": "chy_product",
            "productName": "车海洋产品666",
            "description": "测试",
            "createTime": "2021-10-22 15:52:42",
            "creatorId": "1",
            "updateTime": null,
            "updateId": null
        }, {
            "productModelCode": "chy_automatic",
            "productModelName": "全自动",
            "productCode": "chy_product",
            "productName": "车海洋产品666",
            "description": "测试",
            "createTime": "2021-10-22 15:52:16",
            "creatorId": "1",
            "updateTime": null,
            "updateId": null
        }, {
            "productModelCode": "chy_android",
            "productModelName": "安卓机",
            "productCode": "chy_product",
            "productName": "车海洋产品666",
            "description": "测试",
            "createTime": "2021-10-22 15:50:06",
            "creatorId": "1",
            "updateTime": null,
            "updateId": null
        }, {
            "productModelCode": "S3",
            "productModelName": "S3电动自行车",
            "productCode": "S1-01",
            "productName": "小白系列电动自行车S101",
            "description": null,
            "createTime": "2021-10-22 14:26:49",
            "creatorId": "1",
            "updateTime": null,
            "updateId": null
        }
    ]
}
// 定义数据出口
export default {data} 

明天再把一些关键点列一下，今天先发布了。

参考文章

https://www.cnblogs.com/web-learn/p/15722923.html

https://www.cnblogs.com/xiaohuasan/p/15720539.html