项目主要依赖
总览
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
<!--模板内容-->
<div class="time">{{format(rating.rateTime)}}</div>
<!--script内容-->
methods: {
format (time) {
return moment(time).format('YYYY-MM-DD hh:mm')
},
}
-
IcoMoon 生成字体图标 官方文档
选中下载解压后，将 fonts目录 与 style.css 文件拷贝于项目文件中，我这里放入 common 目录中。
<!--模板内容-->
<span class="icon-cart"></span>
<!--在style里引入css文件路径-->
@import '../../common/style.less'
-
axios 获取模拟数据
安装：
1.图形化界面搜索插件vue-cli-plugin-axios
2.$ npm install axios --save
细节
- 通过vue-router向子组件传递数据的方法：
<router-view keep-alive
:goods='goods'
:ratings='ratings'
:seller='seller'>
</router-view>
然后在路由配置index.js:
routes: [
{
path: '/goods',
component: Goods,
props: true
},
//
]
- 由于vue是异步获取数据，要注意在img标签的src前加冒号（v-bind绑定属性）
<img :src='data'>，否则图片不会被加载。 - sticky footers （粘页脚）的应用 - 粘页脚，即当页面内容不够外层容器高度时，footer粘在容器底部，当内容超出容器高度时footer被往下顶。
- 由于多个页面使用到了样式不同的星星子组件，而父组件无法修改修改子组件样式，所以设置属性使接受不同属性的子组件呈现不用的样式。
<star :size='48' :score="seller.score"></star>
<!--style-->
.star-24 {
//
}
.star-36 {
//
}
- flex布局 - flex布局
- 用一个
<keep-alive>元素将动态组件包裹起来，用于保留组件状态或避免重新渲染，在标签中直接写入keep-alive是一样的效果。- 动态组件 - 修改cube-ui组件样式不能在
<style scoped>里面修改。 - 用 filter 对数组进行过滤 - vue过滤
- 用
Vue.set给对象新增属性
调用方法：
import Vue from 'vue'
Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
- 让view-router固定高度,超出部分在容器内滚动而不带动页面上面的内容滚动（吸顶效果）：
<div class="appbox">
<headerbox :seller='seller'></headerbox>
<div class="router-wrapper">
<div class="routerbox1">
<router-link to='/goods' >商品</router-link>
</div>
</div>
<div class="view-wrapper">
<router-view keep-alive></router-view>
</div>
</div>
.headerbox {
position: relative;
}
.view-wrapper {
position: absolute;
top: 174px;
bottom: 0;
width: 100%;
overflow: scroll;
}
