从webpack开始
有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。
所以vue+webpack调试要从webpack入手。
我们先从一般情况开始说。
-sourcemap
webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。
devtool: '#source-map'
然而这个设置实际上没这么简单。
官方默认的是用 ‘#cheap-module-eval-source-map’
devtool: '#cheap-module-eval-source-map'
设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。
或者，直接找到对应的文件。在chrome用 ’ctrl(command) + p‘，输入文件名，可以找到对应的源代码。
打断点：
需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。
-vue-cli
vue家的项目脚手架，推荐使用。
vue-cli可以帮我们自动搭建项目，首先npm全局安装
npm install -g vue-cli
然后创建一个新的项目
vue init webpack my-project
一路回车，搞定。
这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)
从bulid文件夹里面就大概能看出：
webpack.dev.conf: 开发模式用
webpack.prod.conf: 生产模式用
其中，开发模式提供了devtool为’#cheap-module-eval-source-map’，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。 若为true，则devtool为’#source-map’
其他使用方法一致。非常方便。