WebStorm创建vue2项目

安装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

image-20220427235415340

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

WebStorm创建vue2

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

image-20220427235612933

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

调试

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

  • 设置调试端口

在Preference中配置调试端口

image-20220428010948957
如果不知道应用端口,在应用启动后会打印在控制台上
  • 添加JavaScript Debug配置文件,URL填写正确的端口号
image-20220428011132389
设置调试端口后,IDE会自动创建一个配置文件,如果已经创建就无需再创建
  • 启动项目

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

  • 测试

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

image-20220428011431105

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

image-20220428011641235
Trackback

no comment untill now

Add your comment now