关于Vux的使用问题

Question

最近在学习vue，今天在使用Vux的时候按照官方的实例，做了一下Demo但是没有获得想要的效果
使用的是vue-cli
App.vue中的代码如下

<template>
  <div id="app">
    <div 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>
    </div>
  </div>
</template>
<script>
  import Timeline from 'vux/src/components/timeline'
  export default {
    components: {
      Timeline
    }
  }
</script>
<style>
  @import '~vux/dist/vux.css';
</style>

这个是vux中timeline的demo，但是页面并没有呈现相应的效果，效果如下

并报错，错误信息如下

在网络上没有找到多少关于Vux的内容，所以想请教一下，我这么写哪里出现了问题

Answer 1

看你的报错两个问题：

• 第一：你没有动态传入color

• 第二：你没有引入timeline-item

这个页面明显用到了两个组件

• timeline

• timeline-item

你只引入了一个timeline

以下代码经过测试

<template>
  <div 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>
  </div>
</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>

效果如下

Answer 2

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
项目启动成功，但是修改内容的时候，页面没有及时显示修改的内容，得重新跑项目才看到修改的内容，你们有遇到这个问题吗？