day1

制作首页APP组件

  1. 完成header区域,使用mint-UI组件
  2. 完成底部tabbar区域,使用的是MUI。
  • MUI的图标在example文件夹中找,火狐对本地HTML支持不好,使用edge或Chrome打开
  • 需要拷贝扩展图标的样式与字体。
  • 为购物车图标添加类名。
  1. 要在中间区域放置一个router-view来展示路由组件

改造tabbar为router-link

设置路由高亮

  linkActiveClass: 'mui-active'

点击路由展示组件

制作首页轮播图

Swiper组件使用,踩坑

加载轮播图数据

轮播图API地址(原地址已经失效,使用公开的bing每日图片的api)

使用axios加proxytable代理(踩坑)

day1_第1张图片

day1_第2张图片

遇到奇怪的bug
修改了proxyTable 的配置后,跨域还是不成功,最后删了node_modules重新下载了一次,解决了

改造九宫格区域的样式

切换组件的动画

day1_第3张图片

时间的格式的处理

moment.js

删掉依赖后重新 npm i 后报错
(解决)

day1_第4张图片
image.png

你可能感兴趣的:(day1)