vue 开发中报错点【二】

本页目录

npm安装依赖报错

npm install 报错chromedriver 记录

IE9中， 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题

elementUI的el-input删除操作无法触发数据变动监听

mounted钩子函数中请求数据导致页面闪屏问题

class动态绑定 三元写法

vue获取后端数据应该在created还是mounted方法

Vue2.0项目中使用axios 一开始json文件放在根目录下，怎么访问都是报错404

Vue packages version mismatch: 版本始终报错不一致的解决方案

 

npm安装依赖报错：permission denied，错误信息大致如下：

npm ERR! Darwin 15.6.0                                                                                                                     
npm ERR! argv                                             
npm ERR! node                                                                                                                       
npm ERR! npm                                                                                                                      
npm ERR! path                                                                                           
npm ERR! code EACCES                                                                                                                       
npm ERR! errno -13                                                                                                                         
npm ERR! syscall mkdir                                                                                                                     
                                                                                                                                           
npm ERR! Error: EACCES: permission denied, mkdir              
npm ERR!     at Error (native)                                                                                                             
npm ERR!  { Error: EACCES: permission denied, mkdir         
npm ERR!     at Error (native)                                                                                                             
npm ERR!   errno: -13,    

关键错误信息：Error: EACCES: permission denied, 解决办法：

 win系统 管理员身份运行cmd再npm命令

 mac系统 全局要加sudo sudo npm install ....

 

npm install 报错chromedriver 记录，错误信息如下：

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.34.1 install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the chromedriver@2.34.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

该问题是vue-cli脚手架的一个bug，解决办法：

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

IE9中， 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题

解决方法：

/**
 * 强制重绘页面的select 输入框，解决IE9只显示单个字符串问题
 * @param useNextTick {Boolean} 使用在vm next tick 处理， 默认true
 */
forceRedrawSelect: function (useNextTick) {
    useNextTick = useNextTick !== false;
    if (!browser.isIE)
        return;
    var _this = this;
    var redraw = function () {
        var $select = _this.$("select");
        $select.css('width', 0);
        $select.css('width', '');  // remove from style tag
    };
    if(useNextTick)
        this.$nextTick(redraw);
    else
        redraw()
},

vue 解决ie9的兼容问题

当vue遇见ie9的时候，部署到服务器之后，打开居然是一片空白

1.首先  npm install --save babel-polyfill

然后在main.js中的最前面引入babel-polyfill

import 'babel-polyfill'

 

2.在index.html 加入以下代码（非必须）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3.在config中的webpack.base.conf.js中,修改编译配置

entry:{
    app:['babel-polyfill','./src/main.js']      
}

4.当然，如果你只用到了 axios 对 promise进行兼容，可以只用 es6-promise

npm install es6-promise --save

 

5.在 main.js 中的最前面 引入

import 'es6-promise/auto'

IE9中，elementUI的el-input删除操作无法触发数据变动监听

解决办法：加入ie9input事件垫片
cnpm install --save ie9-oninput-polyfill

 

mounted钩子函数中请求数据导致页面闪屏问题

其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了

class动态绑定 三元写法：

:class="[isShowTab?'showTab':'noShowTab']"

vue获取后端数据应该在created还是mounted方法：

看情况了，一般放到created里面就可以了，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到

mounted(){

this.$nextTick(() => {

/* code */

}) }里面

 

window.addEventListener('scroll',function(){ 

 在这个里面使用this.data 提示未定义，请问如何访问data(){return {}}的数据
试试 用 （）=> {}或者：
this.$data或者：
let vm =this ;window.addEventListener('scroll',function(vm ){}）

这样 你就能 访问  vue 的  this 

Vue2.0项目中使用axios 一开始json文件放在根目录下，怎么访问都是报错404

讲json放到了static目录下就可以访问了

Vue packages version mismatch: 版本始终报错不一致的解决方案

报错说：

Module build failed: Error:

Vue packages version mismatch:

- vue@2.4.4

- vue-template-compiler@2.5.13

报错原因：通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为一种习惯)，导致了vue和vue-template-compiler的版本不一致。

解决方案：

1 npm instll
2 npm update
3 先运行npm update 报错还是一样，我们只要重新在执行一下npm install 安装一下就可以成功运行