一、vue中三元表达式资源无法显示

  • 前面加require

    1. <div class="about">
    2.   <fade>
    3.     <h1 slot="fade" v-show="isShow">This is an about page</h1>
    4.   </fade>
    5.   <img @click="play" :src="isPlay?require('@/images/pause.png'):require('@/images/play.png')" alt="">
    6. </div>

    二、图片报403出不来

    1. <meta name="referrer" content="never">

    三、关于key的报错

    image.png
    image.png

  • 同级key设置相同导致报错

修改：加上字符串
image.png

四、Vue数据加载成功报错

避免在没有数据的时候显示解析
有数据的时候div才存在，用v-if控制一下
image.png

  • 做一个if判断

image.png

五、如何解决非工程化项目，网速慢时初始化页面闪动问题？

  • 使用v-cloak指令，v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none配合使用。
  • 在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用。 ```javascript
    {{message}}

[v-cloak]{ display:none; }

  1. <a name="X7CMx"></a>
  2. ## 六、如何禁止弹窗后面的滚动条滚动
  4. 1. 设置document的overflow为hidden
  5. 1. 给document绑定touchmove事件，阻止默认事件
  6. ```javascript
  7. methods : {
  8.    //禁止滚动
  9.    stop(){
  10.         var mo=function(e){e.preventDefault();};
  11.         document.body.style.overflow='hidden';
  12.         document.addEventListener("touchmove",mo,false);//禁止页面滑动
  13.     },
  14.     //取消滑动限制
  15.     move(){
  16.         var mo=function(e){e.preventDefault();};
  17.         document.body.style.overflow='';//出现滚动条
  18.         document.removeEventListener("touchmove",mo,false);
  19.     }
  20. }

七、关于EsLint报错以及配置

vue ESLint报No ESLint configuration found
解决：

  1. npm init -y
  3. npm install eslint --save-dev
  5. ./node_modules/.bin/eslint --init 初始化配置文件

7-1 EsLint配置详解

  1. module.exports = {
  2. "env": {
  3. "browser":true,
  4.         "es6":true,
  5.         "node":true
  6.     },
  7.     "extends":"eslint:recommended",
  8.     "parserOptions": {
  9.         "ecmaVersion":2015,
  10.     "sourceType":"module"
  11.     },
  12.     "rules": {
  13.         // 缩进
  14.         "indent": [
  15.                 "error",
  16.             4 //我的是编辑器自动格式化，不是使用tabs，而是四个空格
  17.         ],
  18.         "linebreak-style": [
  19.                         "error",
  20.             "windows"
  21.         ],
  22.         // 引号
  23.         "quotes": [
  24.                         1,
  25.             "single"
  26.         ],
  27.         // 分号结尾
  28.         "semi": [
  29.                         "error",
  30.             "always"
  31.         ],
  32.         "no-unused-vars": [2, {
  33.                         // 允许声明未使用变量
  34.             "vars":"local",
  35.             // 参数不检查
  36.             "args":"none"
  37.         }],
  38.         // 最大空行100
  39.         "no-multiple-empty-lines": [0, {"max":100 }],
  40.         "no-mixed-spaces-and-tabs": [0],
  41.         //不能使用console
  42.         "no-console":'off',
  43.         //未定义变量不能使用
  44.         "no-undef":0,
  45.         //一行结束后面不要有空格
  46.         "no-trailing-spaces":1,
  47.         //强制驼峰法命名
  48.         "camelcase":2,
  49.         //对象字面量项尾不能有逗号
  50.         "comma-dangle": [2, "never"],
  51.         //this别名
  52.         "consistent-this": [2, "that"],
  53.     }
  54. };

7-2 Vue中关闭EsLint

image.png
然后重新编译

八、安装node-sass报错

在网上看了各位大神的解决办法，然后自己试了试。发现使用淘宝镜像安装就可以了。但是得先把错误的删除。
npm uninstall node-sass
删除完成后，再重新使用淘宝的镜像安装
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
终于成功了！