2017 年 03 月，学习总结

[cobish]

03 月 01 日

postcss-loader & autoprefixer

昨天一直在 webpack 1.0 配置 postcss-loader，但是 autoprefixer 死活没有生效，错误的配置代码如下：

module.exports = {
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css-loader'),
      scss: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader'),
      postcss: [
        require('autoprefixer')()
      ]
    }
  }
};

谷歌了很久，尝试了很多修改，未果。后来发现要安装 autoprefixer，于是：

$ npm install autoprefixer --save-dev

以为可以了，结果还是没效果，郁闷。

今早再次谷歌，突然发现我的 postcss 的位置写！错！了！

module.exports = {
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract('css-loader'),
      scss: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
    },
    postcss: [
      require('autoprefixer')()
    ]
  }
};

终于成功了！参考链接请戳这里。

[cobish]

03 月 02 日

一直以为都为 node-sass 的安装而头疼，今天 google 到了不错的方法，妈妈再也不用担心我 npm 安装失败了。详情请戳这里。

[cobish]

03 月 23 日

Vue

• 父组件调用子组件方法：

child.vue

<template>
  <div>child</div>
</template>

<script>
  export default {
    methods: {
      handleParentClick() {
        console.log('parent click');
      }
    }
  }:
</script>

parent.vue

<template>
  <div>
    <button @click="handleClick">点击</button>
    <child ref="child"></child>
  </div>
</template>

<script>
  import Child from './child';

  export default {
    component: {
      child: Child
    },
    methods: {
      handleClick() {
        this.$refs.child.handleParentClick();
      }
    }
  };
</script>

• 参考：https://segmentfault.com/q/1010000005345202

[cobish]

03 月 30 日

Webpack

• 尝试用 vue-cli 中的 webpack-simple 构建项目，发现 vue 单文件组件 sass-loader 的 sourceMap 没法定位到精确的位置（即具体的 sass 在 vue 文件中的行数，还有 @import 后 sass 文件里的代码行数）。

通过与 vue-cli 的 webpack 构建的 demo 比较，将以下代码改动以下即可使 sourceMap 准确定位 sass 代码。

修改前：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader'
          }
        }
      }
    ]
  },
  devtool: '#eval-source-map'
}

修改后：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': {
              loader: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader',
              options: {
                sourceMap: true
              }
            }
          }
        }
      }
    ]
  },
  devtool: '#eval-source-map'
}

• 一直以来 vue 单文件组件在 chrome debug 我都需要先 console.log() 一句话，然后从 console 里找到相应的行数进去才能够 debug，突然发现了这一条特殊语句 debugger，再也不用老是写 console.log() 来 debug 了。

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },

  mounted() {
    debugger  // 代码运行到此处会中断
    console.log(111);
  }
}