Vue开发常见问题及解决方法

安装问题

-。 install timeout 安装超时
解决:
方法01: npm 换用 cnpm

cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些

-。 提示没有安装python 、build失败等
因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,大多都齐全window 用户依赖 visual studio 的一些库和python 2+,
windows的小伙伴都装上:

  • windows-build-tools
  • python 2.x

缺少依赖或模块

-。can't not find 'xxModule' 找不到某些依赖或者模块
这种情况一般报错信息可以看到是哪个包抛出的信息
解决: 卸载该模块后,重新安装


Vue运行报错

启动报错

vue-cli脚手架关闭eslint
报错

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

解决
vue-cli脚手架关闭eslint
- 1. 打开 build文件夹下面的webpack.base.conf.js;
- 2. 找到下面这段代码,将它注释掉
- 3. 重启项目

const createLintingRule = () => ({       //将它们注释掉
  // test: /\.(js|vue)$/, 
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

报错

[Vue-warn]: Missing required prop: "to"  (found in component ) //报错

这个错误是少了个to或者是写错
解决: 正确写法为:

路由在做字符串拼接的时候,to要作为一个属性绑定

声明click/on-click的方法找不到

报错

[Vue warn]: Invalid handler for event "on-click": got undefined  //报错

解决: click/on-click的方法 没有写到methods:{ }里面。

-。 给组件内的原生控件添加事件,不生效的问题




 


  
  {{item.menuName}}

 
 



  
  {{item.menuName}}

 


-。在函数内用了this.xxx=,为什么抛出 Cannot set property 'xxx' of undefined;

这是this的套路了…this是和当前运行的上下文绑定的…
一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;

解决:
暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
箭头函数: 会强行关联当前运行区域为 this 的上下文;
关于this的知识, 推荐读阅 <<你不知道的 JS 系列>>

vue 在src引入图片报错

Module not found: Error: Can't resolve '../../images/icons/loading2.gif' in '/home......

报错信息就是图片找不到路径
解决
~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置

air quality 

兼容问题

使用了 axios, IE 整个家族都不支持 promise, 解决方案:

npm install es6-promise  

// 在 main.js 引入即可
require("es6-promise").polyfill();   // ES6的polyfill

你可能感兴趣的:(Vue.js)