项目问题

解决

1. 减少data里面定义的变量
2. 多个弹窗Modal的时候，控制弹窗显示的变量只需要一个，通过弹窗类型来决定哪个弹窗显示。

用过的插件

1. babel-plugin-transform-remove-console
2. compression-webpack-plugin
3. style-resources-loader

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/mixins.scss'),
      ],
    })
}

4. vue-loader是什么?

vue文件的一个加载器，跟template/js/style转换成js模块。

TIP

1. preserveWhitespace 去掉代码空格减少包体积
2. transformToRequire

场景:以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件

用了这个之后就可以直接；

// page 代码可以简化为
<template>
  <div>
    <avatar img-src="./assets/default-avatar.png"></avatar>
  </div>
</template>

前提是需要在vue.config.js设置：

module.exports = {
  pages,
  chainWebpack: config => {
    config
      .module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
      options.transformAssetUrls = {
        avatar: 'img-src',
      }
      return options;
      });
  }
}

5. image-webpack-loader

在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片

vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

vuex数据刷新丢失

图片加载失败

场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片

// page 代码
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
  data(){
    return{
      imgUrl:''
    }
  },
  methods:{
    handleError(e){
      e.target.src=reqiure('图片路径') //当然如果项目配置了transformToRequire,参考上面 27.2
    }
  }
}
</script>