持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情
商品展示
-
这里的商品列表展示以后会多次用到，所以我就把它封装为一个companies组件了，首先在项目根目录下右键点击选择创建目录，命名为companies，以后这个文件夹就专门用来存放组件了，然后在companies文件下创建goods-list.vue文件，之后就在这个文件里面编写我们的商品列表了。
-
首先创建一个view容器，用来存放每一个商品，并且命名为goods-list，然后再在这个view容器内创建一个goods-item的view容器，商品展示需要商品图片，价格，商品名称，所以我们需要用到image和text,这里可以使用接口里面的数据，也可以自己写死数据，我这边就展示一个商品的样式如何写，具体的代码如下图：
- 然后就是css样式了，这里我们的用的是scss,需要在style里面加上lang="scss"，scss可以使我们写css样式的时候更加简洁明了。首先，goods-list这个大容器我们使用的使flex布局，使商品的每一项都排列成一行并且换行展示，换行展示的具体代码为flex-wrap: wrap;这里我们还在app.vue里面定义了一个主题颜色，以后用到时可以直接写名称使用，具体的css代码如下：
这样我们的商品展示就完成了，具体的样子就如下图了：
