首先介紹下，CodePen 是一個在線社區，用於測試和展示用戶創建的 HTML，CSS 和 JavaScript 代碼段。在上面有非常多的代碼片段，以及 CSS 的各種有創意的 demo。我可以說很多各種奇幻的效果都產自於它，例如用 CSS 畫出一幅油畫，以及 CSS 畫出各種卡通人物，這也是我第一個用的在線編輯網站。
接下來我們介紹，CodePen 新出的這兩個在線功能，真的是愛了愛了，無論是對分享代碼片段，還是快速嚐鮮來說，都是非常好的體驗。
vue SFC
什麼是 vue SFC ? 即Single File Components 一個.vue 文件。.vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊.
在以前 CodePen 的在線編輯只支持 html 形式，因此在 codepen 上寫代碼，是這個樣子的。
由於我們本地都是 .vue 形式開發， 對於這種形式比較無感覺，看上去也比較麻煩。因此像我，後來就轉向 codesanbox.
因爲他提供了像本地開發一樣的模式，但是缺點就是慢，以及我們看他的交互方式，最初是三列的，雖然各個列可以收起，但是還是給我們提供了選擇，用戶其實對於選擇和二次操作的事情是比較頭疼的。雖然有缺點，但是我覺得他也是一個比較好的在線編輯器，很長的一段時間，我都用他來進行測試。
「但是！！今天！！我選擇了 CodePen，他支持了 vue SFC。」
默認的兩列布局，沒有多餘的東西需要去選擇，
編寫後實時編譯的速度快。
單文件修改（很多時候，其實我們只需要一個
.vue文件來進行在線測試。）
以下就是展示 Vue2 SFC (https://codepen.io/hua1995116/pen/xxwWjYj)
來到左上角的設置換個vue3 來看看
Vue3 SFC https://codepen.io/hua1995116/pen/MWaVXGP
flutter
這個功能，可以說對新人或者想要調試某個示例來說，非常方便了，直接可以上代碼，先體驗效果。
不需要安裝環境，也不用再等待緩慢的構建。
我們使用 flutter 的官方列表 demo 來體驗一把這個 online coding。
代碼地址：https://flutterchina.club/catalog/samples/animated-list/
體驗地址：https://codepen.io/pen/editor/flutter
整個過程寫代碼非常流暢，編譯速度也非常快。
更多例子:
https://codepen.io/zoeyfan/pen/mdeebvy
https://codepen.io/zoeyfan/pen/ExVaXGK
最後
推薦一波我收藏的在線編輯網站吧
https://codepen.io/ (支持 js 、html、vue、flutter 等)
https://jsfiddle.net/ (支持 js 、html )
https://jsbin.com/ (支持 js 、html )
https://babeljs.io/repl （支持 js 以及各種高級語法、帶 console）
https://codesandbox.io/ （支持vue、angular、react、nest.js、svelte等）
https://stackblitz.com/ （支持angular、react、ionic、svelte等）
支持
歡迎關注公衆號 「「秋風的筆記」」，主要記錄日常中覺得有意思的工具以及分享開發實踐，保持深度和專注度，喜歡的點擊右下角的在看哦。
