超詳細圖解如何運行vue項目
??本篇超級詳細案例截圖教學 如何運行別人的vue項目，圖片點擊可放大仔細看
一、查看node.js版本
Vue環(huán)境配置教程 ：http://www.dbjr.com.cn/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文件夾的樹狀結構，還記錄了模塊的下載地址，但是它是基于項目作者的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 -選擇源碼文件夾下的文件夾（一定要記?。?/strong>
這樣就成功導入源碼。
在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://www.dbjr.com.cn/article/283110.htm
1、打開vscode
2、打開前端代碼文件
3、新建終端
4、輸入npm run serve
5、成功
6、瀏覽器輸入localhost:8080
總結
到此這篇關于如何運行vue項目的文章就介紹到這了,更多相關vue項目運行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue在H5 項目中使用融云進行實時個人單聊通訊,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
基于Vue3+TypeScript的全局對象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了從0搭建vue-cli4腳手架，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了uniapp的生命周期,應用生命周期是指應用程序從啟動到關閉的整個過程，包括應用程序的啟動、前后臺切換、退出等,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了IE9 elementUI文件上傳的問題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對各位有所幫助2018-10-10
Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。下面這篇文章主要給大家介紹了關于Vue.js中數(shù)據(jù)綁定的語法教程，文中通過示例代碼介紹的非常詳細，相信對大家具有一的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了vue多種彈框的彈出形式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導致頁面布局的問題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導致頁面布局的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
之前對于vue中用到過的checkbox也只是別人寫好的組件，這次在自己實現(xiàn)時走了很多坑，特意寫這篇文章記錄到腳本之家平臺，供大家參考2018-11-11