??本篇超級詳細案例截圖教學 如何運行別人的vue項目，圖片點擊可放大仔細看

一、查看node.js版本

Vue環(huán)境配置教程 ：http://m.fzitv.net/article/251371.htm

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

進入cmd命令行窗口，

輸入node -v查看nodejs版本

輸入npm -v查看npm版本

node -v
npm -v

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

二、運行別人的項目的前提準備

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

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

2、進入項目的終端

1.首先，進入vue項目所在目錄（如下圖所示）

2.在當前路徑框中輸入【cmd】，回車

3、清除npm緩存

npm有緩存時，常常出現(xiàn)安裝依賴不成功的現(xiàn)象，且一旦出現(xiàn)這個問題，報錯信息很完善，但根據(jù)報錯信息一項一項去解決，卻死活解決不了，還找不出原因?？刂婆_輸入下面命令清除npm緩存，npm有緩存時，常常出現(xiàn)安裝依賴不成功的現(xiàn)象

npm cache clean -force

4、重新安裝依賴。

npm install

5、最后運行項目。

npm run serve

6、成功

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

三、運行vue的三種方法

第一種方法：cmd下運行

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

1、首先，進入vue項目所在目錄（如下圖所示）

2、在當前路徑框中輸入【cmd】，回車

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

4、成功

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

打開IDEA

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

這樣就成功導入源碼。

在IDEA中配置vue插件

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

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

1、給idea設置自啟動便捷方式，方便啟動項目

在idea中點擊下圖的地方，選擇Edit Configurations

2、選擇npm

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

4、點擊，以后項目直接點擊這個就可以運行

5、成功，如下圖

??方法2：

1、點擊view-Tool Windows-Terminal

2、輸入npm run serve

3、出現(xiàn)地址

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

vscode:安裝教程：http://m.fzitv.net/article/283110.htm

1、打開vscode

2、打開前端代碼文件

3、新建終端

4、輸入npm run serve

5、成功

6、瀏覽器輸入localhost:8080

總結(jié) 

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

最新評論