在開(kāi)始我們的Vue新建工程之前,首先需要保證你已經(jīng)安裝了Node.js環(huán)境。如果沒(méi)有的話,可以去官網(wǎng)下載安裝最新的Node.js版本。在安裝完成后,我們就可以開(kāi)始創(chuàng)建我們的Vue項(xiàng)目了。
我們可以通過(guò)命令行的方式來(lái)創(chuàng)建一個(gè)新的Vue項(xiàng)目。打開(kāi)終端,進(jìn)入到你想要新建項(xiàng)目的文件夾中,輸入以下命令:
vue create my-project
其中,my-project是你想要命名的項(xiàng)目名稱。在輸入完命令之后,終端會(huì)提示你選擇一種預(yù)設(shè)配置。我們可以選擇默認(rèn)的配置,也可以手動(dòng)選擇需要的配置。選擇完成后,Vue會(huì)自動(dòng)安裝相應(yīng)的依賴。
如果你已經(jīng)用Vue CLI創(chuàng)建了項(xiàng)目,那么你需要進(jìn)入到該項(xiàng)目的文件夾中。接著,我們就可以啟動(dòng)該項(xiàng)目了。輸入以下命令:
npm run serve
這個(gè)命令會(huì)啟動(dòng)一個(gè)本地的開(kāi)發(fā)服務(wù)器,并自動(dòng)打開(kāi)瀏覽器。你可以在瀏覽器中輸入本地服務(wù)器地址來(lái)查看你的應(yīng)用。默認(rèn)情況下,地址為http://localhost:8080。
如果我們想要將我們的代碼部署到生產(chǎn)環(huán)境中,該怎么辦呢?我們可以輸入以下命令進(jìn)行編譯:
npm run build
這個(gè)命令會(huì)將我們的代碼編譯成生產(chǎn)環(huán)境可以使用的靜態(tài)文件。編譯完成后,我們就可以將生成的dist文件夾中的內(nèi)容部署到服務(wù)器上了。
在Vue中,我們可以使用Vue CLI進(jìn)行插件的安裝和管理。我們可以通過(guò)以下命令來(lái)安裝用于HTTP請(qǐng)求的axios插件:
npm install axios
安裝完成之后,在我們的代碼中就可以引入axios模塊并進(jìn)行HTTP請(qǐng)求了:
import axios from 'axios' axios.get('/api/user') .then(response =>{ console.log(response) }) .catch(error =>{ console.log(error) })
在這里,我們通過(guò)axios.get()方法來(lái)進(jìn)行GET請(qǐng)求。當(dāng)請(qǐng)求成功時(shí),我們會(huì)在控制臺(tái)中輸出response對(duì)象,否則會(huì)輸出error對(duì)象。
除了axios之外,Vue CLI還提供了許多其他的插件,供我們使用。我們可以在終端中輸入以下命令來(lái)查看所有可用的插件:
vue add
命令執(zhí)行完成后,會(huì)提示你選擇需要安裝的插件。
總之,Vue CLI是一款非常實(shí)用的工具,可以幫助我們快速地創(chuàng)建和管理Vue項(xiàng)目。希望這篇文章可以幫助你更好地使用Vue CLI。