[email protected] + cube ui搭建饿了么商家页面

项目地址

项目主要依赖

• [email protected] 官方文档
• [email protected] 官方文档
  使用图形化界面初始项目、安装插件，命令行里输入vue ui 进入。

总览

overview:

overview.png

header:

header.png

header中的details:

details.png

通过路由进行goods、ratings、seller切换：

ratings.png

seller.png

相关技术点

• cube-ui组件 官方文档
  安装：
  在图形化界面中搜索插件vue-cli-plugin-cube-ui。
  其实这个组件库里我只使用到了一个组件： ScrollNav，利用这个组件来实现商品页面左右联动的效果。
• moment.js 将时间戳格式化 官方文档
  安装：$ npm install moment --save

{{format(rating.rateTime)}}


methods: {
format (time) {
      return moment(time).format('YYYY-MM-DD hh:mm')
    },
}

• IcoMoon 生成字体图标 官方文档
  选中下载解压后，将 fonts目录 与 style.css 文件拷贝于项目文件中，我这里放入 common 目录中。

@import '../../common/style.less'

• axios 获取模拟数据
  安装：
  1.图形化界面搜索插件vue-cli-plugin-axios
  2.$ npm install axios --save

细节

• 通过vue-router向子组件传递数据的方法：

然后在路由配置index.js:

routes: [
    {
      path: '/goods',
      component: Goods,
      props: true
    },
//
  ]

• 由于vue是异步获取数据，要注意在img标签的src前加冒号（v-bind绑定属性），否则图片不会被加载。
• sticky footers （粘页脚）的应用 - 粘页脚，即当页面内容不够外层容器高度时，footer粘在容器底部，当内容超出容器高度时footer被往下顶。
• 由于多个页面使用到了样式不同的星星子组件，而父组件无法修改修改子组件样式，所以设置属性使接受不同属性的子组件呈现不用的样式。

.star-24 {
  //
}
.star-36 {
  //
}

• flex布局 - flex布局
• 用一个 元素将动态组件包裹起来，用于保留组件状态或避免重新渲染，在标签中直接写入 keep-alive 是一样的效果。- 动态组件
• 修改cube-ui组件样式不能在