vue 和 webstorm(02) 之vue项目在webstorm中运行并使用debug

vue项目在webstorm中运行并使用debug

01) 在chrome中安装插件 JetBrains IDE Support  [ 想办法自己下载 ]

02) 创建demo项目 vue init webpack vuejs-webpack-project-dafei

 

03) 在config/index.js 中 修改  devtool: 'source-map'  , [ 不配置这项,后面断点的时候会显示不出结果 ]

 

04-01) 先使用npn 正常启动vue项目,可以使用   http://localhost:8080/#/ 访问到项目 
04-02) 配置debug启动  Edit Configurations -->JavaScript Debug--> Name自己随便写, URL:[  http://localhost:8080/#/  注意要he04-01中端口保持一致 ]

          选中src 目录,在右侧写  webpack:///src 

05)  测试代码,在   src/components/HelloWorld.vue 中写测试代码,在test方法上打上断点,点击虫子启动debug 

 

<template>
  <div class="hello">
    <button @click="test">dafei_测试222</button>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    test(params) {
      
      let foo = 1;
      let bar = 2;
      let sum = foo + bar;
      console.log(sum);
      console.log('hello dafei')

    }
  }
}
</script>

 其他参考地址 

webstorm 调试vue项目

webstorm搭建vue项目且debug项目

使用WebStorm/IDEA开发调试Vue/Webpack工程项目