推薦兩個前端程式碼線上編輯器
單檔案線上編輯器：https://codepen.io/pen/
專案級線上編輯器：https://codesandbox.io/

單檔案線上編輯器

codepen

相信使用 element-ui元件庫的小夥伴應該知道 codepen線上編輯器，因為element-ui預設的線上案例都是通過 codepen提供。以下是<el-table>的一個線上案例。
分別提供了 html、css、js 編輯框，以及預覽檢視，簡潔明瞭。頂部幾個按鈕分別可以進行儲存、專案配置（引入依賴在此配置）、切換展示檢視等等。

引入外部依賴庫通過頂部的’Setting’進行操作。如圖，有兩種方式：

1. 通過搜尋來引入外部依賴
2. 直接寫url地址來引入外部依賴

專案級線上編輯器

codesandbox

當僅僅除錯單個檔案程式碼時 codepen 其實已經滿足需要了。但當需要除錯多個檔案，存在父子元件、頁面巢狀引用等等情況時，codepen就不行了（至少目前我是這樣認為的）。

所以，噔噔噔，主角登場，就是 codesandbox。重點是，不需要登入也能用！！！
如圖，左側一塊是專案結構、依賴、編輯視窗，像極了在本地用VSCode開發。右側就是預覽檢視。

codesandbox提供了很多基礎模板，用來建立專案，上圖就是使用其vue模板建立的專案。（不登入只能建立三個專案）
操作也簡單，只需要兩步：
1、點選‘Create SandBox’
2、選擇需要的模板
完成了專案的建立，等待其初始化完成就能進行開發測試了。

經常需要除錯程式碼，so建立一個基礎測試模板，新功能可fork此模板進行除錯。
包含元件：vue-router、element-ui
vue-router模板

---

end