超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目
??本篇超級(jí)詳細(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)版本號(hào)就安裝成功了
進(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)去解決，卻死活解決不了，還找不出原因?？刂婆_(tái)輸入下面命令清除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、在啟動(dòng)的命令行窗口輸入【npm run serve】，回車
4、成功
第二種方法：IDEA開發(fā)工具打開
打開IDEA
File - open -選擇源碼文件夾下的文件夾（一定要記?。?/strong>
這樣就成功導(dǎo)入源碼。
在IDEA中配置vue插件
點(diǎn)擊File–>Settings–>Plugins–>搜索vue.js插件進(jìn)行安裝，下面的圖中我已經(jīng)安裝好了。
??方法1(推薦使用)：
1、給idea設(shè)置自啟動(dòng)便捷方式，方便啟動(dòng)項(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊
這篇文章主要介紹了Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
基于Vue3+TypeScript的全局對(duì)象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對(duì)象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對(duì)象的注入和使用，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了從0搭建vue-cli4腳手架，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了uniapp的生命周期,應(yīng)用生命周期是指應(yīng)用程序從啟動(dòng)到關(guān)閉的整個(gè)過程，包括應(yīng)用程序的啟動(dòng)、前后臺(tái)切換、退出等,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了IE9 elementUI文件上傳的問題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對(duì)各位有所幫助2018-10-10
Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。下面這篇文章主要給大家介紹了關(guān)于Vue.js中數(shù)據(jù)綁定的語法教程，文中通過示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本篇文章主要介紹了vue多種彈框的彈出形式的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁面布局的問題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁面布局的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
之前對(duì)于vue中用到過的checkbox也只是別人寫好的組件，這次在自己實(shí)現(xiàn)時(shí)走了很多坑，特意寫這篇文章記錄到腳本之家平臺(tái)，供大家參考2018-11-11