如何运行vue项目(超详细图解）

曾经终败给现在 2024-05-05 22:05 9阅读 0赞

> 大家好✌！我是Dwzun。很高兴你能来阅读我，我会陆续更新Java、前端、数据库、项目案例等相关知识点总结，还为大家分享优质的实战项目，本人在Java项目开发领域有多年的经验，陆续会更新更多优质的Java实战项目，希望你能有所收获，少走一些弯路，向着优秀程序员前行！  
> 🍅更多优质项目👇🏻  
> **🚀Java项目精选：** [点击进入Java精品项目专栏][Java]  
> 📚更多优质项目👇🏻👇🏻可点击下方获取🍅文章底部或评论区获取📚  
> 📚 **[Java项目精品实战案例《100套》][Java]** 📚  
> 📖本篇超级详细案例截图教学 如何运行别人的vue项目，图片点击可放大仔细看

### 一、查看node.js版本 ###

**Vue环境配置教程 ：https://blog.csdn.net/m0\_57545353/article/details/124366678**

配置完成后分别在cmd中执行node -v查看是否安装成功，出现版本号就安装成功了

进入[cmd命令][cmd]行窗口，

输入node -v查看nodejs版本

输入npm -v查看npm版本

node -v
    npm -v

如下图 如所示，即为安装成功：

![在这里插入图片描述][5d4b3a9015994aaa97298cdca558d587.png_pic_center]

### 二、运行别人的项目的前提准备 ###

**1、删除package-lock.json和node\_modules 文件**

package-lock.json记录了整个node\_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。

![在这里插入图片描述][2f94a91e97e648f4adf8e4b4ee10c7df.png_pic_center]

**2、进入项目的终端**

1.首先，进入vue项目所在目录（如下图所示）

![在这里插入图片描述][c63a2485dcef4b0d9079f3a01c69c871.png_pic_center]

2.在当前路径框中输入【cmd】，回车

![在这里插入图片描述][7d22ce03b7f34da99ce44da3d2aa2212.png_pic_center]

**3、清除npm缓存**

npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。控制台输入下面命令清除npm缓存，npm有缓存时，常常出现安装依赖不成功的现象

npm cache clean -force

**4、重新安装依赖。**

npm install

![在这里插入图片描述][d259cd7ba2664473a7dd12502c47a8c1.png_pic_center]

**5、最后运行项目。**

npm run serve

![在这里插入图片描述][6b8c1b9949a84e84aa83185c8a58f1d1.png_pic_center]  
**6、成功**  
![在这里插入图片描述][69b3ef5ecf394f81b6e7b5428e9a824e.png_pic_center]  
**7.浏览器输入地址：http://localhost:8080 ，出现界面**

![在这里插入图片描述][132c25044d8641ad890139ed3bc7af2f.png_pic_center]

### 三、运行vue的三种方法 ###

#### 第一种方法：cmd下运行 ####

（根据项目路径依次输入命令）

1、首先，进入vue项目所在目录（如下图所示）

![在这里插入图片描述][c63a2485dcef4b0d9079f3a01c69c871.png_pic_center]

2、在当前路径框中输入【cmd】，回车

![在这里插入图片描述][7d22ce03b7f34da99ce44da3d2aa2212.png_pic_center]

3、在启动的命令行窗口输入【npm run serve】，回车  
![在这里插入图片描述][bf3699f1d2b2482c909f2aa226a004f5.png_pic_center]

4、成功

![在这里插入图片描述][69b3ef5ecf394f81b6e7b5428e9a824e.png_pic_center]

#### 第二种方法：IDEA开发工具打开 ####

**打开IDEA**  
![在这里插入图片描述][009dcbedbdec4de8907ad226f7085f0f.png_pic_center]

**File - open -选择源码文件夹下的文件夹（一定要记住）**

![在这里插入图片描述][ad6069ba033d4d968bccc6aae5434305.png_pic_center]

![在这里插入图片描述][b8ed2418c3ca4a6489ad064b873c6dfb.png_pic_center]

**这样就成功导入源码。**

**在IDEA中配置vue插件  
点击File–>Settings–>Plugins–>搜索vue.js插件进行安装，下面的图中我已经安装好了。**

![在这里插入图片描述][a795147c16ea4bb692f3c26f6c712e38.png_pic_center]

**🎩方法1(推荐使用)：**

1、给idea设置自启动便捷方式，方便启动项目  
在idea中点击下图的地方，选择Edit Configurations  
![在这里插入图片描述][7fb1d7387b7f470dbd10028a801f731a.png_pic_center]

2、选择npm  
![在这里插入图片描述][8ef23427b2254f02b87c6debe6eefbc6.png_pic_center]  
3、根据项目而来有些事dev有些是serve ，这里选择serve，然后先Apply在Ok  
![在这里插入图片描述][579b18af25294efcb68fae820f02d906.png_pic_center]  
4、点击，以后项目直接点击这个就可以运行

![在这里插入图片描述][c3844dec99a44beaab16fd21b7615683.png_pic_center]  
5、成功，如下图  
![在这里插入图片描述][7ac850ebbb3240f4a678f259a61e6674.png_pic_center]

**🎩方法2：**

1、点击view-Tool Windows-Terminal

![在这里插入图片描述][f03582e0f5014b4980e4f0cb2e7cf596.png_pic_center]  
2、输入npm run serve

![在这里插入图片描述][97c4161864f24f3ea99b964b710d16f1.png_pic_center]

3、出现地址  
![在这里插入图片描述][1d00655b4a4b464697a30ffa74ae570c.png_pic_center]

#### 第三种方法：VSCode开发工具运行 ####

vscode:安装教程：https://blog.csdn.net/MSDCP/article/details/127033151

1、打开vscode

![在这里插入图片描述][009dcbedbdec4de8907ad226f7085f0f.png_pic_center]

2、打开前端代码文件  
![在这里插入图片描述][ecad9aa5a2684d27aa2e57f5a4121447.png_pic_center]  
3、新建终端  
![在这里插入图片描述][d14da2a3bb714232b227ec5adfcafd3b.png_pic_center]  
4、输入npm run serve

![在这里插入图片描述][8c9513c0e4474355b39f91bb9413ab4c.png_pic_center]

5、成功

![在这里插入图片描述][69b3ef5ecf394f81b6e7b5428e9a824e.png_pic_center]

6、浏览器输入localhost:8080

![在这里插入图片描述][132c25044d8641ad890139ed3bc7af2f.png_pic_center]

[Java]: https://blog.csdn.net/weixin_44209743/category_12185312.html
[cmd]: https://so.csdn.net/so/search?q=cmd%E5%91%BD%E4%BB%A4&spm=1001.2101.3001.7020
[5d4b3a9015994aaa97298cdca558d587.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/c60a092761bf44e1a91b4ed438ab0826.png
[2f94a91e97e648f4adf8e4b4ee10c7df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/8977dc49cdf14d94b7a61877a9c3cdd8.png
[c63a2485dcef4b0d9079f3a01c69c871.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/b7c6d23b9b7d466ab685a85d503ae504.png
[7d22ce03b7f34da99ce44da3d2aa2212.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/484b32667ce24cc8b23e3f1d25f5732d.png
[d259cd7ba2664473a7dd12502c47a8c1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/652d665bbb9944c1bf43ee6a394b386f.png
[6b8c1b9949a84e84aa83185c8a58f1d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/729eab295fe442d88ce6c263bfb6ea75.png
[69b3ef5ecf394f81b6e7b5428e9a824e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/63c3571383e14948942bffd3b2208eec.png
[132c25044d8641ad890139ed3bc7af2f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/ea524b0c15034b4cb25ebb55ad2da37c.png
[bf3699f1d2b2482c909f2aa226a004f5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/df29156461794a10a3e3a2fa3507b3d5.png
[009dcbedbdec4de8907ad226f7085f0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/cb3a089ff0ac4898acba2b938bb17a6a.png
[ad6069ba033d4d968bccc6aae5434305.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/e0a3b80415d041988a494e4aa1e60694.png
[b8ed2418c3ca4a6489ad064b873c6dfb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/1a3b0487cb8e45628495e147d038ddeb.png
[a795147c16ea4bb692f3c26f6c712e38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/0ae52178e77a4caea0e40e454b329f04.png
[7fb1d7387b7f470dbd10028a801f731a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/d49cc713b6024281b1eac7658d02a458.png
[8ef23427b2254f02b87c6debe6eefbc6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/176ef36d93c74eefb51c27ed404b9e37.png
[579b18af25294efcb68fae820f02d906.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/cdc9176b00414b69a13f7633f936a08f.png
[c3844dec99a44beaab16fd21b7615683.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/560348892d4f4f759e3a6946132908af.png
[7ac850ebbb3240f4a678f259a61e6674.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/b0b630921b0149c4949e799df24829df.png
[f03582e0f5014b4980e4f0cb2e7cf596.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/1ee4b01c43b34751bb95b9129552c321.png
[97c4161864f24f3ea99b964b710d16f1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/813b0e93e48c4572824342ae66454cd8.png
[1d00655b4a4b464697a30ffa74ae570c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/63b21f9bf26649d880bf4a847ceab35d.png
[ecad9aa5a2684d27aa2e57f5a4121447.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/5d22e93dd3234efaae3043923ab45556.png
[d14da2a3bb714232b227ec5adfcafd3b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/83c932aa386e4e5ebce43105940ce2d7.png
[8c9513c0e4474355b39f91bb9413ab4c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/30e9ac3548e345c1abedfe3e30fadc9c.png