Vue做项目常见问题？

场景一：

报错：[Vue warn]: Invalid default value for prop "wmList": Props with type Object/Array must use a factory function to return the default value.

查看代码：

    wlList:{  //物流工具
      type:Array,
      default:[
        {name: '物流百度', url: 'https://www.baidu.com'},
        {name: '物流知乎', url: 'https://www.zhihu.com'},
      ]
    },

 查看资料得知：props default数组/对象的默认值应该是由一个工厂函数返回的

代码改为：

    wlList:{  //物流工具
      type:Array,
      default:()=>[
        {name: '物流百度', url: 'https://www.baidu.com'},
        {name: '物流知乎', url: 'https://www.zhihu.com'},
      ]
    },

在查看打印信息，发现已经解决了问题。

---

场景二：

报错：- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

 查看代码：

template:`
    <div class="footer-wrap">
      <div class="grid-wide clear">
      </div>
    </div>
    <div class="footer-bottom">
      <div class="grid-wide clear">
          <div class="bottom-content">
            <div class="ft-team">
            </div>
          </div>
      </div>
    </div>`,

查看资料得知：vue官方文档-模板的单个根元素，每个组件必须只有一个根元素。

所以，想要出现正常的效果，需要用一个div或是别的标签来包裹全部的元素。

template:`
    <div>
        <div class="footer-wrap">
          <div class="grid-wide clear">
          </div>
        </div>
        <div class="footer-bottom">
          <div class="grid-wide clear">
              <div class="bottom-content">
                <div class="ft-team">
                </div>
              </div>
          </div>
        </div>
    </div>`,

在查看打印信息，发现已经解决了问题。

---

场景三：

报错：GET file:///E:/newWorkSpace3/tradepromo-view/WebContent/assets/js/element-ui/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND.

这个问题是我在引用element-ui的小图标时候，发现这个错误的。

<i class="el-icon-edit"></i>

如图所示：

如图所示：elment-icons.woff  和  element-cions.ttf  两个字体图标文件网络请求失败，这就是问题原因所在。

官方推荐的写法：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>

非网络引Element-ui css：

这种方式就会导致上述出现的情况：
element-ui的index.css拷贝本地之后,会发现图标无法正常显示了
原因：在本地的index.css中发现是网络请求icon字体图标 fail造成的

解决办法：

我们就把需要的这两个elment-ui 字体图标，elment-icons.woff  和  element-cions.ttf 文件下载下来,放到我们的目录中即可。

但是我们应该放在哪个文件夹下呢？

如图所示，我们可以发现字体图标加载地址：element-ui/fonts/文件夹下.

element-ui字体图标安装地址：

https://unpkg.com/browse/element-ui@2.4.11/lib/theme-chalk/fonts/

我们把这两个文件下载下来，放到我们对于的文件夹目录下。

我们在查看一下页面：

这就妥了，以后不用担心是否在断网的情况下网络请求，导致fail的问题了。

---