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

以前有朋友求助, 讓我幫忙找篇比較容易的 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繪製前端頁面. 歡迎預習~