17
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.js #2Advent Calendar 2017

Day 25

vueの単一ファイルコンポーネント用のオンラインエディタを作ってみた

Last updated at Posted at 2017-12-24

✨実験用の小さなコードを公開するのに、jsfiddleはとても便利ですよね。
📄vueは、単一ファイルコンポーネント(SFC)の仕組みがとても気に入っています。

この2つを組み合わせたものが欲しくて、VueFiddleなるものを密かに開発を進めています。

About VueFiddle

  • WIP
  • vueに特化したオンラインIDE
  • 単一ファイルコンポーネントの記述対応
  • templateは HTML / PUG 対応
  • styleは CSS / LESS 対応
  • scriptは javascript / TypeScript 対応
  • URLシェアに対応
  • サポートブラウザ(PC版 Chrome/Firefox)

Usage

基本的には、jsfiddleと似せています。
 左上のtemplate(HTML)パネルに、templateを記述し、
 左下のscript(JAVASCRIPT)パネルに、scriptを記述し、
 右上のstyle(CSS)パネルに、styleを記述します。
そして、上部のRUNを押すか、F5で実行します。
各パネルの言語はオルト言語へ切り替え可能です。
(HTML⇔PUG 、 javascript ⇔ typescript 、 CSS ⇔ LESS)
必要に応じて、左側のMENUから、タイトルや説明等を設定できます。

scriptパネルでのnpmの外部モジュール読込にも対応していますが、
umdかamd形式のモジュールを読み込む必要があります。

Example

WIP版なので、不思議な挙動が残っています

17
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?