之前有朋友求助, 讓我幫忙找篇比較容易的 vue 入門文章. 我是逛遍了掘金仍然未果. 正好兒藉著對介面測試的興趣. 用 vue 搞一個前端介面測試工具(類似瀏覽器端的 postMan). 第一步我們搭建一個順手的開發環境. 主要包括安裝 node, 安裝 vue-cli, 安裝編輯器, 專案初始化, eslint 配置.
ps: 本文中環境的搭建是基於 mac 的, 如果有用 win 且需要幫助的小夥伴. 請評論區留言, 待我去網咖的時候把 win 環境下的部分也補上

首先, 安裝 node
- 首先登入 node 官網
簡潔的官方網站映入眼簾, 碩大的綠色按鈕讓人情不自禁的想要點他一下, 不要抑制內心的想法, 點吧 ^_^. - 完成後點選下載下來的 .pkg 如果出現下面的頁面說明安裝包是真的~.
- 之後的步驟就是點選
繼續
, 一路繼續, 終點就是羅馬. - 最後一步就是驗證 node 安裝結果, 隨便開啟一個你喜歡的終端, 輸入
node -v
回車即可 如果終端顯示這個, 恭喜你安裝已經成功了. 如果安裝失敗的小夥伴也不要氣餒, 可以百度一下
其次, 安裝 vue-cli
- 執行命令
npm i -g vue-cli
, 如果下載 npm 包過慢, 建議採用以下命令, 切換淘寶映象
# 設定 npm 映象為淘寶映象
npm config set registry https://registry.npm.taobao.org
# 還原 npm 映象為官方映象
npm config set registry https://registry.npmjs.org
複製程式碼
- 待下載命令執行完成後命令列執行
vue
返回結果如下圖所示說明安裝成功
然後, 安裝編輯器
前端開發理論上是可以用各種各樣的編輯器的, 但是為了效果一致, 這裡推薦大家使用 Visual Studio Code, 為什麼要用這個呢??? 我們下面詳談
再次, 專案初始化
- 終端切換到專案目錄
- 按照下圖所示的方式建立專案
為了防止動圖過大, 這裡就不錄製全部流程了. node 依賴包安裝, 最重要的就是要有耐心... - 安裝完成後, 執行那個傳統的命令
npm run dev
執行完 npm run dev
以後, 開啟瀏覽器並開啟 localhost:8080 已經能夠在瀏覽器中看到一個大大的 V 字.



eslint
, 給它配上一副眼鏡, 讓報錯無處可逃...
最後, eslint 配置
eslint 配置在我之前的文章【手把手帶你擼一個腳手架】第二步, 搭建開發環境中有詳細說明, 這裡不做重複. 通過這篇文章的配置, 我們能做到 js 檔案的錯誤標識和自動修復. 感興趣的同學可以開啟專案目錄下的 main.js 檔案看看

Command + s
咦, 報錯沒有了~

npm run dev


仔細觀察一下, 不難發現, 命令列中報錯的內容都是 ***.vue
檔案, 那就簡單啦.
- 使用 vscode 開啟專案目錄
- 按下組合鍵
Command + .
進入偏好設定 - 輸入框中輸入
eslint.validate
回車,點選在setting.json 中編輯
接下來如圖所示滑鼠放到左側, 點選小鉛筆, 複製到設定. - 在左側貼上過來的陪配置中增加一行
{ "language": "vue", "autoFix": true }
記得儲存 - 回到 App.vue 飄紅已經能正常顯示了, 再按下
Command + s
試試 ?
至此, 開發環境已經搭建完成. 有任何問題的小夥伴, 請評論區切磋喲.

下集預告: 搭建完成開發環境以後, 下一步, 基於 Element-UI繪製前端頁面. 歡迎預習~
