超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目
??本篇超級(jí)詳細(xì)案例截圖教學(xué) 如何運(yùn)行別人的vue項(xiàng)目，圖片點(diǎn)擊可放大仔細(xì)看
一、查看node.js版本
Vue環(huán)境配置教程 ：http://www.fzitv.net/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版本庫(kù)生成的，若不刪掉這個(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.fzitv.net/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 監(jiān)聽列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳
這篇文章主要介紹了vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
el-table?表格分頁(yè)序號(hào)問題小結(jié)
這篇文章主要介紹了el-table?表格分頁(yè)序號(hào)問題小結(jié),本文通過實(shí)例代碼圖文效果展示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue Element前端應(yīng)用開發(fā)之前端API接口的封裝
對(duì)整個(gè)系統(tǒng)來說，一般會(huì)有很多業(yè)務(wù)對(duì)象，而每個(gè)業(yè)務(wù)對(duì)象的API接口又有很多。我們這個(gè)VUE+Element 前端應(yīng)用就是針對(duì)ABP框架的業(yè)務(wù)對(duì)象，因此前端的業(yè)務(wù)對(duì)象接口也是比較統(tǒng)一的，那么可以考慮在前端中對(duì)后端API接口調(diào)用進(jìn)行封裝，引入ES6的方式進(jìn)行前端API的抽象簡(jiǎn)化。2021-05-05
watch 函數(shù)是 Vue.js 提供的一個(gè)強(qiáng)大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實(shí)現(xiàn)異步數(shù)據(jù)請(qǐng)求、表單驗(yàn)證、動(dòng)態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
Vue openLayers實(shí)現(xiàn)圖層數(shù)據(jù)切換與加載流程詳解
OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個(gè)開源的項(xiàng)目，其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶端提供強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制2022-09-09
本篇文章主要介紹了詳解Vue中一種簡(jiǎn)易路由傳參辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
本文主要介紹了vue3.x頁(yè)面功能拆分方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
本篇文章主要介紹了vue webuploader 文件上傳組件開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09