4月
28
安装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的控制台上

Address: https://zhengjianfeng.cn/?p=637
no comment untill now