【手把手帶你擼一個介面測試工具】第一步, 搭建順手的開發環境

之前有朋友求助, 讓我幫忙找篇比較容易的 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

WTF, 居然還有報錯....

emmmm....

仔細觀察一下, 不難發現, 命令列中報錯的內容都是 ***.vue 檔案, 那就簡單啦.

1. 使用 vscode 開啟專案目錄
2. 按下組合鍵 Command + . 進入偏好設定
3. 輸入框中輸入 eslint.validate 回車,點選 在setting.json 中編輯 接下來如圖所示滑鼠放到左側, 點選小鉛筆, 複製到設定.

   

4. 在左側貼上過來的陪配置中增加一行 { "language": "vue", "autoFix": true } 記得儲存

   

5. 回到 App.vue 飄紅已經能正常顯示了, 再按下 Command + s 試試 ?

   

至此, 開發環境已經搭建完成. 有任何問題的小夥伴, 請評論區切磋喲.

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