前端学习之vue+element-ui电商项目（五）商品列表

0. 准备工作

component下新建文件夹goods下新建文件List.vue，并在路由中引入文件

1.界面布局

1.1 导航界面

<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

2.卡片视图区域

2.1 界面样式

<el-row :gutter="20">
        <el-col :span="8">
             <el-input placeholder="请输入内容"
             v-model="queryInfo.query"
             clearable
             @clear="getGoodsList">
            <el-button
            slot="append"
            icon="el-icon-search"