webstorm创建和调试vue项目

安装node.js

官网下载安装
https://nodejs.org/en/

cmd下创建项目

创建项目文件夹webpack-vue,并cd进入
安装vue-cli

npm install -g vue-cli

初始化

vue init webpack

默认项enter键,其他按情况选择y/n

安装webstorm

下载安装

https://www.jetbrains.com/webstorm/
个性化设置,页面与快捷键可以导入
http://www.voidcn.com/article/p-rumobtki-bms.html
这里的jar包
license server激活地址

http://idea.iteblog.com/key.php

导入项目

导入

运行
这里写图片描述
也可以用自带的终端运行
菜单栏
view->tool windows->terminal
输入

npm run dev

经常输入命令的,打开终端窗口还是有必要的

调试

npm debug的方式开始可以,过一分钟左右就会断开连接,connection refused,放弃
另一种方式如下,但是我觉得还是没有直接用浏览器调试方便

谷歌浏览器添加插件

下载地址如下:
https://pan.baidu.com/s/1jHI8ugu

修改webpack.dev.conf.js

将devtool: config.dev.devtool改为
devtool: ‘source-map’

执行JavaScript debug

这里写图片描述

相关文章
相关标签/搜索