1.这个是安装vue-cli时报的错

npm ERR! path E:\学习\vue.js\my_vue_code\laozhang2\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'E:\学习\vue.js\my_vue_code\laozhang2\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\17999\AppData\Roaming\npm-cache\_logs\2019-08-24T14_01_41_370Z-debug.log
PS E:\学习\vue.js\my_vue_code\laozhang2> npm run dev
npm ERR! path E:\学习\vue.js\my_vue_code\laozhang2\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'E:\学习\vue.js\my_vue_code\laozhang2\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\17999\AppData\Roaming\npm-cache\_logs\2019-08-24T14_08_10_195Z-debug.log

说了一大堆就是没找到文件,原因是我没进入项目的根目录,代码中显示的最后一级目录laozhang2只是我安装项目的目录而已,真正的项目根目录是laozhang2下的blogvue,切换目录后就好了:
在这里插入图片描述
打开localhost:8080如下:
在这里插入图片描述

2.使用prop给组件实例传数据时提示:component lists rendered with v-for should have exp licit keys,结局办法是在标签中加上:key="XXX",实例如下:
//组件实例

<fans_component v-for="fan in fans" :ava="fan.ava"
        :name="fan.name" :blogs="fan.blogs" :fans="fan.fans" :favors="fan.favors"
      :key="fan.id">  <!--看,就是这一行-->
</fans_component>

fans的内容为:

fans:[
                    {
                        id:1,
                        name:"第五次",
                        ava:"static/user/my_user1.png",
                        fans:"100",
                        favors:"3",
                        blogs:"10",
                    },
                    {
                        id:2,
                        name:"第如果从",
                        ava:"static/user/my_user2.png",
                        fans:"34",
                        favors:"3",
                        blogs:"12",
                    },
                    {
                        id:3,
                        name:"撤入公会",
                        ava:"static/user/my_user3.png",
                        fans:"61",
                        favors:"43",
                        blogs:"122",
                    },
                    {
                        id:4,
                        name:"自动分割",
                        ava:"static/user/my_user4.png",
                        fans:"11",
                        favors:"30",
                        blogs:"32",
                    }
                ]

3.有个问题是在写vue的时候发现的,不过主要原因还是HTML没学好。问题是写循环时,如果没给这些循环item一个属性:display:flex,就很容易出现元素高度为零的问题,以及其它各种奇怪的排版问题,即使是手动给它设置了height属性也不行,其中一种表现就是这个循环体的div的上下边界是重合的,具体原因我也不清楚,反正下回出现这个问题记得加上就行,类似下面这样:

<fans_component class="platebody" v-for="fan in fans" >
</fans_component>
.platebody{
    display: flex;
  }

后来发现,上述说法对div也适用。以后排版有问题,第一个就是看有没有写display:flex。

4.根据目前来看,element ui里面的组件即使用于父子通信也是没有问题的,如果样式错位,那可能只是在这个vue组件里样式没调好而已

Logo

前往低代码交流专区

更多推荐