vue 一些记录

一些错误

vue 刷新报错 我还在app.vue中直接在template中写的 router-view 在router-view加上div就解决了

参考：blog.csdn.net/m0_52309938…

---

vue版本"2.6.11" 使用echarts版本5.2.2报错

main.js里是这样引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

解决方式： 1.降低版本用4的版本使用import echarts from 'echarts'引入 2.版本如果是5，使用import * as echarts from 'echarts'引入

---

引入背景图片路径问题

不能使用相对路径

2.5以上要用 ~@

background-image: url(~@/assets/img/bg.jpg);

---

vue测试环境打包出现无css样式，dist下无css文件夹问题

参考cli手册

module.exports = { 
    ... 
    css: { 
        extract: ture 
    } 
    ... 
   }

---

一些使用

**设置全局变量**
Vue.prototype

**this.$el**
this指向组件的实例。
$el指向当前组件的DOM元素。

**捕获错误**
Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error) => errorHandler(error, this);
const errorHandler = (error, vm) => {
    console.error(vm);
    console.error(error);
}

**配置scss全局变量 **
css:{
   详细配置参考vue-cli官网
    loaderOptions:{
        sass:{
            prependData:`@import "~@/components/style/flexible.scss";`
        }
    }
}

**父组件和子组件生命周期钩子执行顺序是什么**
https://zhuanlan.zhihu.com/p/140418573

**加载页面执行步骤**

1、父组件：beforeCreate -> created -> beforeMount

2、子组件：beforeCreate -> created -> beforeMount -> mounted

3、父组件：mounted


**销毁组件执行步骤**

1、父组件：beforeDestroy

2、子组件：beforeDestroy

3、子组件：destroyed

2、父组件：destroyed

**组件重新渲染**
1、给组件绑定`:key`  改变key组件就会重新渲染

2、forceUpdate()
// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

** Vuex中mutations与actions的区别**
更改状态不一定要用actions也可以直接用mutations
this.$store.commit
this.$store.dispatch

mutations必须是同步的   action可以调用一个异步

---

一些第三方库

**element-resize-detector**
要监听某个元素的宽高变化，做出相对应的操作，像重绘echarts图或者改变位置等等

**babel** 
默认只转换新的JavaScript语法，而不转换新的API。

**bable-polyfill**
针对编译的代码中新的API进行处理，并且在代码中插入一些帮助函数。  //cli默认不会安装

**cross-env**
 是运行跨平台设置的和使用环境变量（Node中的环境变量）的脚本 自定义配置环境变量

**rrweb**
嵌入在浏览器中的录像机
一种用于记录和重放用户在浏览器中操作动作的工具。