Vue:第一個(gè)vue-cli程序

特別聲明摘抄------JQuery

1.第一步安裝Node.js(使得JavaScript代碼直接運(yùn)行在瀏覽器上的環(huán)境,相當(dāng)于java代碼與jdk的關(guān)系)

node -v 和 npm -v命令檢驗(yàn)是否安裝成功

2.安裝Node.js淘寶鏡像加速器(以管理員身份運(yùn)行DOS)

方法一:npm install cnpm -g

方法二:使用npm安裝cnpm時(shí)候安裝失敗,我使用npm install cnpm -g老失敗而且長(zhǎng)時(shí)間停留于sill位置

可以試試下面這個(gè)命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝好之后在C:\Users\administor\AppData\Roaming\npm\node_modules路徑下可進(jìn)行查看下載的加速器cnpm

4.接下來(lái)下載vue-cli(使用淘寶加速器下載更快, vue-cli 是官方提供的vue腳手架)

cnpm? install vue-cli -g

檢驗(yàn)和步驟3一致,再點(diǎn)開(kāi)vue-cli文件查看

C:\Users\administor\AppData\Roaming\npm\node_modules\vue-cli\node_modules存放的下載的vue模板

5.到此vue-cli已經(jīng)安裝完成

6.手動(dòng)創(chuàng)建一個(gè)Vue-cli項(xiàng)目

創(chuàng)建一個(gè)vue項(xiàng)目首先創(chuàng)建一個(gè)文件夾myvue,然后在文件夾下打開(kāi)Dos(以管理員身份)

執(zhí)行?vue init webpack myvue命令,初始化一個(gè)基于webpack模板的vue應(yīng)用程序

接下來(lái)如下操作:(為什么一直NO,因?yàn)榭梢愿玫捏w驗(yàn),每一個(gè)步驟,否則自動(dòng)安裝)

說(shuō)明:

4.接下來(lái)就是為vue應(yīng)用程序安裝需要的環(huán)境

使用命令:npm install

5.如果有警告可按照系統(tǒng)提示命令直接運(yùn)行,即可修復(fù)(這里還挺智能的),然后打開(kāi)Idea open創(chuàng)建的項(xiàng)目即可

7.打開(kāi)后生成項(xiàng)目目錄如下:

運(yùn)行項(xiàng)目使用命令npm run dev(在當(dāng)前項(xiàng)目的目錄下,以管理員身份,我的idea打開(kāi)就是以管理員身份的,所以可以在idea的終端下直接運(yùn)行)

運(yùn)行成功:

點(diǎn)擊訪(fǎng)問(wèn)即可,運(yùn)行成功!

ctrl+c停止運(yùn)行

總結(jié):

安裝node.js

安裝cnpm淘寶加速器

安裝vue-cli

創(chuàng)建項(xiàng)目

初始化項(xiàng)目

安裝環(huán)境

打開(kāi)項(xiàng)目

運(yùn)行項(xiàng)目

ok


--------------------------------------------------------------------------------------------------------------------最后特別鳴謝作者JQuery

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容