??本篇超級詳細(xì)案例截圖教學(xué) 如何運(yùn)行別人的vue項(xiàng)目，圖片點(diǎn)擊可放大仔細(xì)看

一、查看node.js版本

Vue環(huán)境配置教程 ：http://www.dbjr.com.cn/article/251371.htm

配置完成后分別在cmd中執(zhí)行node -v查看是否安裝成功，出現(xiàn)版本號就安裝成功了

進(jìn)入cmd命令行窗口，

輸入node -v查看nodejs版本

輸入npm -v查看npm版本

node -v
npm -v

如下圖 如所示，即為安裝成功：

二、運(yùn)行別人的項(xiàng)目的前提準(zhǔn)備

1、刪除package-lock.json和node_modules 文件

package-lock.json記錄了整個(gè)node_moudles文件夾的樹狀結(jié)構(gòu)，還記錄了模塊的下載地址，但是它是基于項(xiàng)目作者的npm版本庫生成的，若不刪掉這個(gè)依賴文件，容易出現(xiàn)npm版本差異導(dǎo)致的報(bào)錯(cuò)。

2、進(jìn)入項(xiàng)目的終端

1.首先，進(jìn)入vue項(xiàng)目所在目錄（如下圖所示）

2.在當(dāng)前路徑框中輸入【cmd】，回車

3、清除npm緩存

npm有緩存時(shí)，常常出現(xiàn)安裝依賴不成功的現(xiàn)象，且一旦出現(xiàn)這個(gè)問題，報(bào)錯(cuò)信息很完善，但根據(jù)報(bào)錯(cuò)信息一項(xiàng)一項(xiàng)去解決，卻死活解決不了，還找不出原因。控制臺輸入下面命令清除npm緩存，npm有緩存時(shí)，常常出現(xiàn)安裝依賴不成功的現(xiàn)象

npm cache clean -force

4、重新安裝依賴。

npm install

5、最后運(yùn)行項(xiàng)目。

npm run serve

6、成功

7.瀏覽器輸入地址：http://localhost:8080 ，出現(xiàn)界面

三、運(yùn)行vue的三種方法

第一種方法：cmd下運(yùn)行

（根據(jù)項(xiàng)目路徑依次輸入命令）

1、首先，進(jìn)入vue項(xiàng)目所在目錄（如下圖所示）

2、在當(dāng)前路徑框中輸入【cmd】，回車

3、在啟動的命令行窗口輸入【npm run serve】，回車

4、成功

第二種方法：IDEA開發(fā)工具打開

打開IDEA

File - open -選擇源碼文件夾下的文件夾（一定要記住）

這樣就成功導(dǎo)入源碼。

在IDEA中配置vue插件

點(diǎn)擊File–>Settings–>Plugins–>搜索vue.js插件進(jìn)行安裝，下面的圖中我已經(jīng)安裝好了。

??方法1(推薦使用)：

1、給idea設(shè)置自啟動便捷方式，方便啟動項(xiàng)目

在idea中點(diǎn)擊下圖的地方，選擇Edit Configurations

2、選擇npm

3、根據(jù)項(xiàng)目而來有些事dev有些是serve ，這里選擇serve，然后先Apply在Ok

4、點(diǎn)擊，以后項(xiàng)目直接點(diǎn)擊這個(gè)就可以運(yùn)行

5、成功，如下圖

??方法2：

1、點(diǎn)擊view-Tool Windows-Terminal

2、輸入npm run serve

3、出現(xiàn)地址

第三種方法：VSCode開發(fā)工具運(yùn)行

vscode:安裝教程：http://www.dbjr.com.cn/article/283110.htm

1、打開vscode

2、打開前端代碼文件

3、新建終端

4、輸入npm run serve

5、成功

6、瀏覽器輸入localhost:8080

總結(jié) 

到此這篇關(guān)于如何運(yùn)行vue項(xiàng)目的文章就介紹到這了,更多相關(guān)vue項(xiàng)目運(yùn)行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論