WebStorm2019.3以后版本搭建vue项目详细步骤

已省略安装node、webpack、vuecli等的步骤。

新建vue project

如下图在WebStorm中新建一个vue项目,注意取消use the default projects setup的勾选。
WebStorm2019.3以后版本搭建vue项目详细步骤
新建完成后会在控制台中报错,如图(图示为网图)。且此时项目目录为空。
WebStorm2019.3以后版本搭建vue项目详细步骤

在终端执行vue init webpack

在终端执行 vue init webpack 指令,期间需要确认一些选项。完成后项目目录生成。

终端执行npm install

如果没有呼吸墙外的空气,这一步速度较慢,可能会卡住,可以先执行
npm config set registry https://registry.npm.taobao.org
更换为淘宝源再执行npm install。

检测结果:npm run dev

完成以上步骤vue项目已经搭建完成。执行npm run dev可以进行查看,如图。
WebStorm2019.3以后版本搭建vue项目详细步骤