vue

vue中一些问题的解决

Posted by sqq5682 on January 9, 2020

npm run dev 错误提示:

	{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

治标的解决方法: 找到你的工程文件夹里的 YourProName\node_modules\vue-loader\lib\template-compiler\index.js

//将以下代码
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babylon' })
}

//修改为:

if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babel' })

治本的解决方法:

	{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" } 是prettier版本导致的

直接在项目中:

	cnpm install prettier@~1.12.0 -D 或者cnpm install prettier@~1.12.0 --save-dev 

然后重新npm run dev

.sass安装报错处理

npm rebuild node-sass

安装完成后,运行时出现了错误

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行。 解决办法:

npm install sass-loader@7.3.1 --save-dev

关于vue官网上的生命周期的说明

大致划分一下分为创建前/后,挂载前/后,更新前/后,销毁前/后这四个阶段。各个阶段的状态总结如下:

  • beforeCreate:在beforeCreate生命周期执行时,data和methods中的数据还未初始化,所以此时不能使用data中的数据和methods中的方法
  • create:data 和 methods初始化完毕,此时可以使用methods 中的方法和data 中的数据
  • beforeMount:template模版已经编译好,但还未挂载到页面,此时页面还是上一个状态
  • mounted:此时Vue实例初始化完成了,DOM挂载完毕,可以直接操作dom或者使用第三发dom库
  • beforeUpdate: 此时data已更新,但还未同步页面
  • updated:data和页面都已经更新完成
  • beforeDestory:Vue实例进入销毁阶段,但所有的 data 和 methods ,指令, 过滤器等都处于可用状态
  • destroyed: 此时组件已经被销毁,data,methods等都不可用

根据以上介绍,页面第一次加载时会执行 beforeCreate, created, beforeMount, mounted这四个生命周期,所以我们一般在created阶段处理http请求获取数据或者对data做一定的处理, 我们会在mounted阶段操作dom,比如使用jquery,或这其他第三方dom库。其次,根据以上不同周期下数据和页面状态的不同,我们还可以做其他更多操作,所以说每个生命周期的发展状态非常重要,一定要理解,这样才能对vue有更多的控制权

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

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

IE9中template标签使用问题

之前在tr标签里面用template标签包裹td标签,出现了比较严重的UI错乱, 所以。。IE9不能在tr标签中使用template标签

vue 项目启动时报错:TypeError: Cannot destructure property compile of ‘undefined’ or ‘null’.

原因: webpack-dev-server 版本过高,解决如下:

npm install -D webpack-dev-server@3.0.0

vue中父组件prop传值给子组件,子组件接收不到

父组件用prop传值给子组件,子组件接收不到, 但是随便在子组件created中打印或者注释掉一行console.log,就会接受到传来的值; 解决:(v-if有值再渲染)