最近在学习vue,今天在使用Vux的时候按照官方的实例,做了一下Demo但是没有获得想要的效果
使用的是vue-cli
App.vue中的代码如下
【广东】 广州市 已发出
2016-04-17 12:00:00
申通快递员 广东广州 收件员 xxx 已揽件
2016-04-16 10:23:00
商家正在通知快递公司揽件
2016-04-15 9:00:00
这个是vux中timeline的demo,但是页面并没有呈现相应的效果,效果如下
并报错,错误信息如下
在网络上没有找到多少关于Vux的内容,所以想请教一下,我这么写哪里出现了问题
npm install vue-cli -g // 如果还没安装
vue init airyland/vux2 project
cd project
npm install // 使用 cnpm 安装可能会出现问题,推荐使用 npm --registry=https://registry.npm.taobao.org
npm run dev
项目启动成功,但是修改内容的时候,页面没有及时显示修改的内容,得重新跑项目才看到修改的内容,你们有遇到这个问题吗?
看你的报错两个问题:
第一:你没有动态传入color
第二:你没有引入timeline-item
这个页面明显用到了两个组件
timeline
timeline-item
你只引入了一个timeline
以下代码经过测试
<template> <p class="timeline-demo"> <timeline :color="color"> <timeline-item> <h4 class="recent">【广东】 广州市 已发出</h4> <p class="recent">2016-04-17 12:00:00</p> </timeline-item> <timeline-item> <h4> 申通快递员 广东广州 收件员 xxx 已揽件</h4> <p>2016-04-16 10:23:00</p> </timeline-item> <timeline-item> <h4> 商家正在通知快递公司揽件</h4> <p>2016-04-15 9:00:00</p> </timeline-item> </timeline> </p> </template> <script> import Timeline from 'vux/dist/components/timeline' import TimelineItem from 'vux/dist/components/timeline-item' export default { data () { return { color: '#04BE02' } }, components: { Timeline, TimelineItem } } </script> <style> @import '~vux/dist/vux.css'; </style>
效果如下