2
2

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 3 years have passed since last update.

codepenでVuetifyを試す

Last updated at Posted at 2020-08-30

はじめに

Vue.jsやReactの使い方を試したいときに、Node.jsをインストールしたりVue.jsをインストールしたりと手間がかかります。CodePenというサイトを使用すると環境作成なしでWebブラウザ上で試せたり、他の人にそのコードを共有するなどが簡単にできます。
デフォルトではVue.jsとVuetifyを使用する設定になっていないため、その設定方法をまとめます。

手順

  1. CodePenにログインしてPenを作成する
  2. Pen上でのVue.jsとVuetifyを有効にする
  3. Penの設定を開く
  4. Vue.jsとVuetifyをJavaScriptから呼び出す
  5. VuetifyをCSSから呼び出す
  6. Vuetifyを試す

1. CodePenにログインする

CodePenにログインして、右上のユーザアイコンをクリックします。
表示されたウィンドウのNewPenをクリックして、Vue.jsを試す画面を表示します。
1.NewPen.png

2. Vue.jsとVuetifyのJavaScriptを有効にする

この状態でもhtml、CSS、JavaScriptを試すことはできますが![2.OpenSettings.png]
Vue.jsとVuetifyを使用するためには、この2つのライブラリを呼び出すように設定する必要があります。

2. 1. Penの設定を開く

Penの設定を開くには右上のSettingsをクリックしてPen Settingsウィンドウを開きます。
2.OpenSettings.png

2. 2. Vue.jsとVuetifyをJavaScriptから呼び出す

Pen SettingsウィンドウのJSをクリックして、JavaScript用の設定を開きます。
Add External Scripts/Pensの項目にvueを入力すると候補がでてくるので必要なVueとVuetifyをクリックします。
この時に候補になければ手でURLを入れることもできます。
3.SettingsJS.png

2. 3. VuetifyをCSSから呼び出す

この状態では、VuetifyのCSSがあたっていないためCSS用の設定をしていきます。
検索でVuetifyが出てこなかったのでAdd External Stylesheets/Pensの項目に手で以下のURLを入れて、Saveボタンを押します。


https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css

4.SettingsCSS.png

Vuetifyを試す

これで環境作成が完了したのでVuetifyを試してみます。
公式のVuetifyのメニューボタンとほとんど同じですが、公式だとCSSやJSのメソッドなどを使わないのでCSSとメソッドを使いためにクリック後のリストを縞々にしました。

See the Pen menu by mink0212 (@mink0212) on CodePen.

終わりに

CodePenを使用してVuetifyを使用する方法をまとめました。JSの設定等は色々なサイトでやっているのですが、CSSは省略していることが多く注意が必要です。
これで面倒な環境作成から解放されてちょっとしたことを試すのが簡単になり、ソースとソースの結果を容易に他の人に共有できるため、共有相手に環境を作ってもらう必要もなく便利だなと感じました。
ソースの長さによっては読みやすさが変わってしまうため、大きいソースの共有には向いていませんが、簡単な勉強会やQiitaのようなところに乗せるには十分に思えます。

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?