题外话：这几个月用vue写了三个项目了，从绊手绊脚开始慢慢熟悉，婶婶的感到语言这东西还是得有点框框架架，太自由了容易乱搞，特别人多的时候。
从webpack开始
直接进入正题。有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。我们先从一般情况开始说。
-sourcemapwebpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。
devtool: '#source-map'
然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择: 戳这里
这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章
官方默认的是用 ‘#cheap-module-eval-source-map’
devtool: '#cheap-module-eval-source-map'设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。
或者，直接找到对应的文件。在chrome用 ‘ctrl(command) + p‘，输入文件名，可以找到对应的源代码。
打断点：
需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。
-vue-clivue家的项目脚手架，推荐使用。vue-cli老家在这里
vue-cli可以帮我们自动搭建项目，首先npm全局安装
npm install -g vue-cli然后创建一个新的项目
vue init webpack my-project一路回车，搞定。(更多配置项请参考上面给出的vue-cli链接)
这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)
从bulid文件夹里面就大概能看出：
webpack.dev.conf: 开发模式用
webpack.prod.conf: 生产模式用
其中，开发模式提供了devtool为’#cheap-module-eval-source-map’，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。
