1. 程式人生 > >手把手教你搭建Vue開發環境,也許你看過很多版本的腳手架安裝教程,但還是容易出現各種問題,本文將帶你走一條最快速的路,繞過很多坑

手把手教你搭建Vue開發環境,也許你看過很多版本的腳手架安裝教程,但還是容易出現各種問題,本文將帶你走一條最快速的路,繞過很多坑

手把手教你搭建Vue開發環境,,希望對你有所幫助!

Hello,各位同學,好久不見,最近忙於瑣事,拖更了0.0,也許你看過很多版本的腳手架安裝教程,但還是容易出現各種問題,本文將帶你走一條最快速的路,繞過很多坑,什麼都不要說,什麼都不要問,照著做,閒話少說,進入正題!

目錄

[TOC]來生成目錄:

第一步:安裝node,考慮到版本問題,這裡建議下載最新版的node,進行安裝(32位還是64位的自己選),附上地址:http://nodejs.cn/download/

node安裝檔案

1:檢查node是否安裝成功了,開啟DOS(win鍵+r鍵),輸入cmd,

開啟dos介面

2:在開啟的DOS介面,輸入node -v(-v前面有個空格),

檢查node版本

3:檢查npm,接著上面的輸入npm -v(-v前面有個空格),

檢查npm

安裝淘寶映象

第三步:安裝webpack,安裝命令:cnpm install webpack -g

第四步:接著安裝全域性的vue-cli腳手架,用於幫助搭建所需的模板框架,安裝命令:cnpm install -g vue-cli

第五步:安裝完後,可以輸入vue,然後回車,如果出現vue的資訊,則說明安裝成功了。

第六步:緊接著,就該建立專案了,自己找一個合適的地方,新建一個專案資料夾,根據自己的需要命名,我的命名為 demo,dos進入到該資料夾下,

進入到專案目錄

第七步:建立專案,安裝命令:vue init webpack demo然後回車到第五個,到第六個的時候輸入y 然後再回車 如下

建立專案

第八步:接著上一個再按n回車,再按n回車,再按n回車,如下,

008

第九步:接著上面一個按回車,專案正式開始建立,等一會,如下,

009

第十步:按照第9個圖片裡面的敲進去,如下(正常情況下埠是8080,由於我本機上面已經開著一個專案了,所以是8081),

010

第十一步:輸入第十步的地址,就可以看見,至此,VUE的開發環境就搭建好了,

011

第十二步:關於VUE路由的使用,元件的分離,拓展的引入,等各種內容,將在下一節詳細介紹,喜歡的小夥伴可以關注一下,點關注,不迷路

END