使用WebStorm运行vue项目

女爷i 2021-09-25 15:20 631阅读 0赞

在WebStorm中怎么打开一个已有的项目，这个不用多说，那么如何运行一个vue项目呢？

1.点击下图中右上角的红框。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70][] 2.在出现的弹框中选中左上角“+”下的“npm”，如下图所示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 1][]

3.选中第二步的“npm”之后，会出现下图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 2][]

4.这里有3个地方需要更改，如下图所示。更改完成之后，依次点击右下角的“Apply”和“OK”。

其中，Name——自己随意取；

package.json——点击右边的下拉箭头，选中那唯一的选项即可；

Scripts——点击右边的下拉箭头，选中"dev"。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 3][]

5.点击下图中右上角的红框运行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 4][]

6.运行结束如下图所示，点击项目地址即可在浏览器中打开。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 5][]

END

————————————————  
版权声明：本文为CSDN博主「Dora\_5537」的原创文章。  
原文链接：https://blog.csdn.net/Dora\_5537/article/details/87921443

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70]: /images/20210923/018df4c56ca949f08ff118bfd3b45949.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 1]: /images/20210923/c14549fc774d47bdb5188fabc3d16d28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 2]: /images/20210923/8d385aefbd7840989fc16deef9a8d3f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 3]: /images/20210923/1c0fa24100b245688cb2614c1549df8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 4]: /images/20210923/218b36fafa79476497a28725fe10c030.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvcmFfNTUzNw_size_16_color_FFFFFF_t_70 5]: /images/20210923/461c3f57582c4ec2963add56e89eb51e.png