1. 程式人生 > >vue.js開發環境初步搭建、腳手架工具安裝(node.js安裝)

vue.js開發環境初步搭建、腳手架工具安裝(node.js安裝)

環境搭建 ima pil utf node.js jni 可用 turn t430

當然,首先是node.js的安裝,百度node,js出現 (為後面的鋪墊)

技術分享

選擇一個版本進行安裝,安裝完成後,在cmd命令行中輸入node --version(註意有兩個 --)查看到版本標明安裝成功技術分享

下面開始vue.js環境搭建和腳手架工具安裝(我的理解的話腳手架就是搭架子= =)

1.打開windows中的cmd命令行,輸入npm install -g cnpm --regestry=http://registry.npm.taobao.org

技術分享技術分享

等待一段時間後顯示如下:

技術分享

註:此處引用淘寶的npm鏡像代替官方版本,以後使用cnpm替換npm是為了更好地提高速度

技術分享

2.回車輸入cnpm -v 查看安裝的cnpm版本

技術分享

3.,輸入命令行:cnpm install -g vue-cli,安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架,采用-g,是為了能夠全局使用,而不是在當前目錄下使用。

技術分享

等待一段時間後 輸入vue出現如下圖所示由此vue生成commands命令

技術分享

4輸入命令行 :vue init webpack my-first-demo 新建一個demo(下圖中回答no的部分為是否需要安裝測試等)

技術分享

5.新建完畢後,cd my-first-demo 由此進入新建的模板中 輸入dir進入目錄查看更多信息

技術分享

6.命令行中輸入:cnmp install

技術分享

稍等後出現下圖所示,該步驟在demo下新建了一個node_modules文件夾,到此腳手架安裝完成

技術分享

7. 輸入npm run dev 運行結果如下圖表示成功搭建

技術分享

8.在瀏覽器中可用命令行中顯示的http://localhost:8080訪問我們的模板,最終達到了可用vue命令和模板的效果。

技術分享

vue.js開發環境初步搭建、腳手架工具安裝(node.js安裝)