javascript - 关于Vux的使用问题

 空白画叶子 发布于 2022-11-27 08:26

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




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

并报错,错误信息如下

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

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

    2022-11-27 08:29 回答
  • 看你的报错两个问题:

    • 第一:你没有动态传入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>

    效果如下

    2022-11-27 08:29 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有