vue入门

安装cnpm，它会从国内源下载包：

npm install -g cnpm --registry=https://registry.npmmirror.com

vue初始化项目后，首先了解组件如何引入，如何组件之间如何传值，以及组件内如何定义自己的方法和变量。

1. nextTick方法

用于获取更新后的dom。vue在修改数据后，视图不会立刻更新，而是同一事件循环中的所有数据变化完成后统一更新。vue.nextTick就是用来获取循环结束后，改变后的dom。即使在mounted阶段里操作渲染后的试图，也不保证所有子组件被挂载，也要使用nextTick。如弹窗里使用echarts：

mounted () {
    this.$nextTick(() => {
      const chartDom = document.getElementById('pictorialBar');
      this.myChart = echarts.init(chartDom, null, { devicePixelRatio: 2.5 });
      console.log(echarts);
      this.myChart.setOption(this.option);
    });
  },

2. 组件通信

父传子，子传父，接入vuex，跨层级的话，子组件A调用父组件方法，父组件修改值，将值作为props传个B，B监听该值变化去调整。案例：点击组件A里的echarts上的图表，将组件B里的地图上的位置高亮。

3. 使用preload获取弹窗里比较大的图片资源，这样打开弹框展示时，会渲染的非常快。

 mounted () {
    this.$nextTick(() => {
      // <link href="./components/modalImages/modal_bg@4x.png" rel="prefetch">
      const link = document.createElement('link');
      // 设置link元素的属性
      link.rel = 'preload'; // 指定关系
      link.as = 'image';
      link.href = require('./components/modalImages/modal_bg@4x.png');
      // 将link元素添加到文档的head中
      document.getElementsByTagName('head')[0].appendChild(link);
    });
  },

4. 按需引入

element-ui和echarts可以按需引入。

与国际化相关的写法：

页面中：{{$t('h["排名"]')}}

this.$t('h["目标"]')

函数里使用：${this.$t('h["累计数"]')} // 拿不到this,改成匿名函数

获取当前语言：let currentLan = this.$i18n.locale;