vue报错及解决方案集合

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组件里样式没调好而已