推薦兩個前端代碼在線編輯器
單文件在線編輯器：https://codepen.io/pen/
項目級在線編輯器：https://codesandbox.io/
單文件在線編輯器
相信使用 element-ui組件庫的小夥伴應該知道 codepen在線編輯器，因爲element-ui默認的在線案例都是通過 codepen提供。以下是<el-table>的一個在線案例。
分別提供了 html、css、js 編輯框，以及預覽視圖，簡潔明瞭。頂部幾個按鈕分別可以進行保存、項目配置（引入依賴在此配置）、切換展示視圖等等。
引入外部依賴庫通過頂部的’Setting’進行操作。如圖，有兩種方式：
- 通過搜索來引入外部依賴
- 直接寫url地址來引入外部依賴
項目級在線編輯器
當僅僅調試單個文件代碼時 codepen 其實已經滿足需要了。但當需要調試多個文件，存在父子組件、頁面嵌套引用等等情況時，codepen就不行了（至少目前我是這樣認爲的）。
所以，噔噔噔，主角登場，就是 codesandbox。重點是，不需要登錄也能用！！！
如圖，左側一塊是項目結構、依賴、編輯窗口，像極了在本地用VSCode開發。右側就是預覽視圖。
codesandbox提供了很多基礎模板，用來創建項目，上圖就是使用其vue模板創建的項目。（不登錄只能創建三個項目）
操作也簡單，只需要兩步：
1、點擊‘Create SandBox’
2、選擇需要的模板
完成了項目的創建，等待其初始化完成就能進行開發測試了。
經常需要調試代碼，so創建一個基礎測試模板，新功能可fork此模板進行調試。
包含組件：vue-router、element-ui
vue-router模板
end