郑剑峰的个人博客

安装vue-cli

vue-cli最新版支持vue3和vue2项目的创建

➜  cnpm install -g @vue/vue-cli
➜  vue create vue2project
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

在创建项目的时候选择Vue2即可

如果不希望使用最新版的cli可以安装只支持vue2的clie

cnpm install -g @vue/cli@3.10.0

WebStorm配置

在webstorm上新建一个配置，配置模板选择npm

脚本选择serve即可，相同的道理，也可以创建构建配置

WebStorm创建vue2

如果要通过webstorm创建vue2项目，那么必须安装老版本的vue-cli，比如上面提到的3.10.0

通过webstorm创建vue2的好处就是会自动帮我们加好配置，缺点就是不支持cli一些自定义配置

调试

WebStorm可以实现在IDE内部设置断点进行调试，比浏览器自带的调试功能方便很多，下面介绍如何在Webstorm中进行配置

• 设置调试端口

在Preference中配置调试端口

如果不知道应用端口，在应用启动后会打印在控制台上

• 添加JavaScript Debug配置文件，URL填写正确的端口号

设置调试端口后，IDE会自动创建一个配置文件，如果已经创建就无需再创建

• 启动项目

可以在控制台使用命令npm run serve启动项目也可以通过在webstorm上添加配置文件启动，只要保证端口号和调试端口号一致就可以进行调试

• 测试

我们在vue代码中设置断点，启动应用进行触发

通过webstorm对vue代码进行调试会极大方便我们vue开发，并且打印在浏览器控制台上的信息也会同步打印到webstorm的控制台上