用WebStorm运行VUE项目

柔光的暖阳◎ 2024-02-19 07:57 20阅读 0赞

> 提示：原来用VS Code开Vue，可是VS Code用Ctrl打不开国际化，下载推荐插件也不好使

#### 文章目录 ####

*  下载WebStorm
 *  运行
 *  WebStorm实用插件

--------------------

## 下载WebStorm ##

`提示：这里可以添加本文要记录的大概内容：`

[https://www.jetbrains.com/webstorm/][https_www.jetbrains.com_webstorm]

下载后这里可以去网上买一个程序XX

也可以试试在设置里面选择插件，在设置图标中选择第一个  
![在这里插入图片描述][54ab9264b5c34a939b7aec0cdd84c22a.png]  
然后把 `https://plugins.zhile.io` 放进去  
![请添加图片描述][01a55d1d904a44258d129ba799ca8ac9.png]  
搜索IDE Eval Reset插件安装  
![请添加图片描述][5e9eae546f3a41759de1cbc3d08d95b5.png]  
如果有需要就点击 Help 下的 Eval Reset 重置

--------------------

`提示：我之前已经安装过Node的v14.21.3版本`

## 运行 ##

导入已经有vue项目，选中`package.json`文件，右击选中`show npm scripts`  
![在这里插入图片描述][ea84a354dbbe4300b7ad21a82aa41922.png]  
点击serve，配置node

此时，可能可能会报错，尝试重新WebStorm后，执行`npm install`或`cnpm install`  
![请添加图片描述][342562af4e254da58d2b93e838eb0f0b.png]

最后运行项目  
![请添加图片描述][92cb60d676cf44ac949eca57a5c95e34.png]

## WebStorm实用插件 ##

`CodeGlance`：右侧代码缩略图功能

`Rainbow Brackets`：彩虹括号

[https_www.jetbrains.com_webstorm]: https://www.jetbrains.com/webstorm/
[54ab9264b5c34a939b7aec0cdd84c22a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1e8d4b81ac504f5a8fa3be790c656dee.png
[01a55d1d904a44258d129ba799ca8ac9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/57f20742cb734c7f9a2b6929f69bc6d4.png
[5e9eae546f3a41759de1cbc3d08d95b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/5b59858afa534715949c4fa502c400e9.png
[ea84a354dbbe4300b7ad21a82aa41922.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e19b751ee075407bb3adfe1a46928a75.png
[342562af4e254da58d2b93e838eb0f0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/5bcfaab55a4e454dbbc28909b42807e6.png
[92cb60d676cf44ac949eca57a5c95e34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/9d0c97c611f3430aa20e8e5f6127a4ab.png