代码打卡--基于Element与vue构建购物车前端

1.最终效果：仿照京东购物车商城界面构建购物粗前端

商品列表的最终展现内容由数据库的内容决定

京东购物商城

2.构建代码

1.导航栏

关键部分：

active-text-color：设置活跃页面的颜色

router：支持路由跳转

index：路由器跳转的路径

2.搜索栏

search使用了element的input与button

商城logo使用了element的icon，并定义了一个层级最高的数字在icon顶上表示购物车的数目

3.轮播图

总体上使用element的走马灯：

左边：

关键部分：直接在<>块中定义css样式。

v-for表示展示的图片。data中定义数据如下

fit设置图片的填充方式：fit为充满

中间：

仍然是走马灯的使用

左边用户菜单：

使用的是icon。配合css形成2列3行

定义了header块与body块，分别储存头像，与菜单

4.商品列表

通过v-for实现商品的展示

实际就是定义双重for循环

197与202，看作二维数组的循环。

3.总代码

4.总结：

使用element组件可以在简单组件中节省时间，且方便管理使用