一文教會(huì)你如何運(yùn)行vue項(xiàng)目
一、運(yùn)行vue項(xiàng)目
1、下載node.js
安裝完成后分別在cmd中執(zhí)行node -v查看是否安裝成功，出現(xiàn)版本號(hào)就安裝成功了
2、安裝 webpack
npm install webpack -g
安裝完成后分別在cmd中執(zhí)行npm -v查看是否安裝成功，出現(xiàn)版本號(hào)就安裝成功了
3、安裝vue-cli腳手架
cnpm install vue-cli -g
安裝完成后查看vue-cli腳手架 版本確定是否安裝成功，出現(xiàn)版本號(hào)就安裝成功了
vue -V
4、使用vue-cli創(chuàng)建項(xiàng)目
首先創(chuàng)建一個(gè)文件夾，cmd 進(jìn)入到該項(xiàng)目里，輸入以下命令
vue create hello-world
注：hello-word是文件夾名字可以改
5、運(yùn)行項(xiàng)目
輸入以下命令來(lái)運(yùn)行項(xiàng)目
cd hello-world
npm run serve
出現(xiàn)以上頁(yè)面，說(shuō)明項(xiàng)目運(yùn)行成功了。
二、運(yùn)行別人的項(xiàng)目
1、刪除package-lock.json文件
package-lock.json記錄了整個(gè)node_moudles文件夾的樹(shù)狀結(jié)構(gòu)，還記錄了模塊的下載地址，但是它是基于項(xiàng)目作者的npm版本庫(kù)生成的，若不刪掉這個(gè)依賴文件，容易出現(xiàn)npm版本差異導(dǎo)致的報(bào)錯(cuò)。
2、切換項(xiàng)目目錄
然后打開(kāi)cmd，cd到項(xiàng)目目錄，具體操作：先輸入該盤(pán)符，然后再用cd命令切換目錄。
3、清除npm緩存
npm有緩存時(shí)，常常出現(xiàn)安裝依賴不成功的現(xiàn)象，且一旦出現(xiàn)這個(gè)問(wèn)題，報(bào)錯(cuò)信息很完善，但根據(jù)報(bào)錯(cuò)信息一項(xiàng)一項(xiàng)去解決，卻死活解決不了，還找不出原因。
npm clean cache -f
4、重新安裝依賴。
npm install
5、最后運(yùn)行項(xiàng)目。
npm run serve
總結(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響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了使用Vant完成通知欄Notify的提示操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
本文給大家介紹如何使用electron將vue項(xiàng)目打包成.exe文件,大家要注意一下vue2項(xiàng)目,使用的vue-element-admin框架,用electron打包成.exe文件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-03-03
VUE+elementui面包屑實(shí)現(xiàn)動(dòng)態(tài)路由詳解
今天小編就為大家分享一篇VUE+elementui面包屑實(shí)現(xiàn)動(dòng)態(tài)路由詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
由于公司網(wǎng)絡(luò)登element-ui官方文檔很慢,想把他載下來(lái)離線文檔本地跑,下面這篇文章主要給大家介紹了關(guān)于本地部署element-plus文檔的簡(jiǎn)單步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了VUE的數(shù)據(jù)代理與事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11
如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefine
這篇文章主要介紹了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue提示框組件vue-notification使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03