18.搭建 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...
安裝成功後 右鍵菜單
我們可以看到 Gti Bash Here 。說明我們已經安裝成功git
1.2 檢測node 是否安裝成功
右鍵空白,選擇 Gti Bash Here 彈出
1.2.1 在終端輸入 node -v
如果輸出版本號,說明我們安裝node 環境成功
隨便我們可以查看 npm 的 版本號
可以使用 npm -v
第三步 vue-cli腳手架安裝
2.1 如果訪問外網比較慢,可以使用淘寶的鏡像 https://npm.taobao.org/
打開命令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回車之後,我就可以可以快樂的用 cnpm 替代 npm
看到這樣
恭喜你,你已經成功安裝了 cnpm
但是此後,我們還是使用 npm 來運行命令
2.2 接下來就是重點了 安裝vue-cli
npm install vue-cli -g
如果你很幸運,那麽接下來就是這樣的
我們成功了
2.3 進入我們的項目目錄,右鍵 Gti Bash Here
2.4 初始化項目 vue init webpack vue-demo
一直回車直到
是否要安裝 vue-router 項目中肯定要使用到 所以 y 回車
是否需要 js 語法檢測 目前我們不需要 所以 n 回車
是否安裝 單元測試工具 目前我們不需要 所以 n 回車
是否需要 端到端測試工具 目前我們不需要 所以 n 回車
接下來 ctr+c 結束
2.5 進入 cd vue-demo
2.6 執行 npm install
如果出現下圖,說明安裝成功
2.7 接下來執行 npm run dev
默認瀏覽器會自動打開
註意:如果您的瀏覽器是ie9以下的版本,請升級瀏覽器到最新版本或者下載谷歌瀏覽器或者火狐瀏覽器進行預覽。在地址欄輸入 http://localhost:8080/#/進行訪問
恭喜,你已經成功安裝,並運行起來vue基礎項目,踏入了vue的大門
最後再給大家普及一個小小的問題,遇到的朋友可以在這裏輕松地避免了,就是在搭建完環境以後 npm run dev 會報錯8080端口占用,如果有朋友遇到這個問題,請大家找到config文件---index.js,把裏面的端口隨便改成一個端口,這個問題就可以輕松的避免了。
18.搭建 vue 環境