まえがき
最近Qiitaにも貼れるようになり、ますます良く見かけるようになったCodePen。
自分でも小さなVueアプリのサンプル書いてみるかーと踏み出し、2歩目でコケてタイトルの疑問。
程なく解決しましたが、同じところで躓いた人のために念の為共有です。
(こんな初歩で躓く人が他にいるのかは分かりませんが)
Codeペンの使い方 初歩の初歩
1. 作る！
Penを作成するためにアカウント作ったあと、とりあえず
プレーンな状態で始めるために右上の Create→ New Penを選択
2. 書く！
CSS, JSフレームに書いた内容は明示的にHTMLフレームでロードしなくても呼び出せる
3. Vue！(失敗)
他の人がやっている要領で、とりあえずVueインスタンスの作成とHTMLのテンプレートを書いてみると…
＿人人人人人人人人人人人人人人人人人人人人人人人＿
＞ Uncaught ReferenceError: Vue is not defined ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
おーん🍤
4. 使いたいライブラリをロード！
結局の所、Vue使いたいならVueをロードしろよっていう話です。
これを開いて
左側のAdd External Scripts/Pensの検索窓にVueを入れて選択。
Vueはじめ、有名所のライブラリは一番下のQuick Add
というプルダウンメニューにもまとまっているので、
そこからから選択してポチポチ追加していってもOK。
5. Vue！(成功)
エラー出なくなった！ログインボタンでlogin()が発火した！
6. ES6とかTypeScriptとか使う
上記と同じメニュー内にある JavaScript Preprocessorから
いろいろ選べる！Babelを選択すればES6シンタックスが使用できる！
おわり！
Qiitaへの貼り方やその他踏み込んだ内容はcodepenタグたどれば出てくるので割愛！