03 月 01 日 postcss-loader & autoprefixer 昨天

03 月 23 日 Vue 父组件调用子组件方法： <p

03 月 30 日 Webpack 尝试用 vue-cli 中的 webpack

2017 年 03 月，学习总结 about demo HOT 3 OPEN

cobish commented on September 12, 2024 1

2017 年 03 月，学习总结

from demo.

Comments (3)

cobish commented on September 12, 2024

03 月 02 日

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

from demo.

cobish commented on September 12, 2024

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

from demo.

cobish commented on September 12, 2024

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

from demo.

2017 年 03 月，学习总结 about demo HOT 3 OPEN

Comments (3)

03 月 02 日

03 月 23 日

Vue

03 月 30 日

Webpack

Related Issues (13)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent