Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

✨実験用の小さなコードを公開するのに、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版なので、不思議な挙動が残っています

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away