爆速で開発するための Vuetify チートシート

Vue.js

はじめに

この記事では@vue/cliとVuetifyを使って初めてWeb開発する人向けに、よく使う構文やコンポーネントをまとめました。基本的にコピペで使えるように、単一ファイルコンポーネントを使用しています。

動作環境
  • Vue.js: 2.6
  • @vue/cli: v.4.4.6
  • node: v8.10.0
  • npm: v5.6.0

導入

Vue.cilのインストールとプロジェクトの作成

以下の記事を参考にして@Vue.cil をインストールし、プロジェクトを作成してください (ここでは “my-app”という名前で作成しました)。

【Vue.js】10分でできる! ~ Vue.jsのインストール → プロジェクト作成と起動まで~ - Qiita
WindowsにおけるVue.jsをインストール → プロジェクト作成までの手順です。 必要なツールのインストール → プロジェクトの作成、起動まで10分あればできちゃいます♪ 環境 Windows 10 ※以下、本記事の...

なお、プロジェクトを作成する際は「Manually select features」を選択し、「Router」にチェックを付けておいてください。それ以外の質問は全てYesかEnterでいいです。

Vuetifyのインストール

BashやVsCodeのターミナルなどで、先ほど作成したプロジェクト(ここでは”my-app”)に移動し、Vuetifyを導入してください。途中の質問は全てYes(or Enter)でいいです。

Vue Serverの起動

以下のコマンドを実行してhttp://localhost:8080/へアクセスしてください。

サーバーが起動しない場合

クローンしてきたプロジェクトだと以下のようなエラーが出る場合があります。

(引用元:https://github.com/vuejs/vue-cli/issues/2596)

これは、node moduleのキャッシュが原因で生じていますので、以下のコマンドを”my-app”フォルダ内で実行してキャッシュをクリーンしてください。

以下の画面が表示されたらVueの導入は完了です。

Appファイルの編集

 src/App.vueファイルのコードを全て削除し、以下のコードをコピペしてください。

Vuetifyのコンポーネントは<v-app></v-app>タグ内で呼ぶ必要があります。

(引用:https://vuetifyjs.com/en/components/application/)

また、 src/views/Home.vueの中身を削除し、以下をコピペしてください。

以下の画面になれば準備完了です。

Routerについてはまた後で説明しますが、この画面はApp.vueの<router-view></router-view>タグによって、/home のURLパスに割り当てられたHome.vueの画面が表示されています。

以降、Home.vueを編集していきます。

Vuetify チートシート 

 パスの指定方法

vueファイル内でコンポーネント等をimportする際、パスを指定する必要があります。その際、’../../view/Example’のように相対パスで指定してもいいのですが、’@’を使うとsrcフォルダを絶対パスで指定できます。以下例です。

Vuetifyのカラー設定

@/plugins/vuetify.js のexport defaultメソッド内に以下の内容を追加してください。

(引用:https://vuetifyjs.com/ja/styles/colors/)

@/views/VuetifyColor.vueに以下をコピペしてください。

classのバインディング方法

@/views/ClassBind.vueを作成し、以下をコピペしてください。

 

また、@/views/Home.vueを以下に書き換えて、AddClass.vueをimportしてください。

 

以下の画面が表示されます。

以下、説明に使用するコンポーネントのコードのみを掲載しますが、同様にHome.vue等にコンポーネントを importして使ってください。

styleのバインディング方法

@/views/StyleBind.vueを作成し、以下をコピペしてください。

 

 

トップページへ戻る

 

すくまりゲームズの人気記事

 

 

 

タイトルとURLをコピーしました