天天看點

手把手教你搭建 vue 環境

第一步 node環境安裝

1.1 如果本機沒有安裝node運作環境,請下載下傳node 安裝包進行安裝

1.2 如果本機已經安裝node的運作換,請更新至最新的node 版本

下載下傳位址:​​https://nodejs.org/en/​​ 或者 ​​http://nodejs.cn/​​

第二步 node環境檢測

為了快樂的使用指令行,我們推薦使用 gitbas

1.1 下載下傳git 并安裝

下載下傳位址 ​​https://git-for-windows.githu...​​

安裝成功後 右鍵菜單

手把手教你搭建 vue 環境

我們可以看到 Gti Bash Here 。說明我們已經安裝成功git

1.2 檢測node 是否安裝成功

右鍵空白,選擇 Gti Bash Here 彈出

手把手教你搭建 vue 環境

1.2.1 在終端輸入 node -v

手把手教你搭建 vue 環境

如果輸出版本号,說明我們安裝node 環境成功

随便我們可以檢視 npm 的 版本号

可以使用 npm -v

手把手教你搭建 vue 環境

第三步 vue-cli腳手架安裝

2.1 如果通路外網比較慢,可以使用淘寶的鏡像 https://npm.taobao.org/

打開指令終端 npm install -g cnpm --registry=​​https://registry.npm.taobao.org​​

回車之後,我就可以可以快樂的用 cnpm 替代 npm

手把手教你搭建 vue 環境

看到這樣

手把手教你搭建 vue 環境

恭喜你,你已經成功安裝了 cnpm

但是此後,我們還是使用 npm 來運作指令

2.2 接下來就是重點了 安裝vue-cli

npm install vue-cli -g

手把手教你搭建 vue 環境

如果你很幸運,那麼接下來就是這樣的

手把手教你搭建 vue 環境

我們成功了

2.3 進入我們的項目目錄,右鍵 Gti Bash Here

2.4 初始化項目 vue init webpack vue-demo

手把手教你搭建 vue 環境

一直回車直到

手把手教你搭建 vue 環境

是否要安裝 vue-router 項目中肯定要使用到 是以 y 回車

手把手教你搭建 vue 環境

是否需要 js 文法檢測 目前我們不需要 是以 n 回車

手把手教你搭建 vue 環境

是否安裝 單元測試工具 目前我們不需要 是以 n 回車

手把手教你搭建 vue 環境

是否需要 端到端測試工具 目前我們不需要 是以 n 回車

手把手教你搭建 vue 環境

接下來 ctr+c 結束

2.5 進入 cd vue-demo

手把手教你搭建 vue 環境

2.6 執行 npm install

手把手教你搭建 vue 環境

如果出現下圖,說明安裝成功

手把手教你搭建 vue 環境

2.7 接下來執行 npm run dev

手把手教你搭建 vue 環境

預設浏覽器會自動打開

​注意:如果您的浏覽器是ie9以下的版本,請更新浏覽器到最新版本或者下載下傳谷歌浏覽器或者火狐浏覽器進行預覽。在位址欄輸入 http://localhost:8080/#/進行通路

手把手教你搭建 vue 環境

恭喜,你已經成功安裝,并運作起來vue基礎項目,踏入了vue的大門。