Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2017 年 03 月,学习总结 #12

Open
cobish opened this issue Mar 1, 2017 · 3 comments
Open

2017 年 03 月,学习总结 #12

cobish opened this issue Mar 1, 2017 · 3 comments

Comments

@cobish
Copy link
Collaborator

cobish commented Mar 1, 2017

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
Copy link
Collaborator Author

cobish commented Mar 2, 2017

03 月 02 日

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

@cobish
Copy link
Collaborator Author

cobish commented Mar 23, 2017

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>

@cobish
Copy link
Collaborator Author

cobish commented Mar 30, 2017

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);
  }
}

@cobish cobish closed this as completed Jun 16, 2017
@cobish cobish reopened this Aug 9, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant