Vuetify.js 超入門

半年前くらいからVue.jsでの開発をしてきて、自分でも何かVueを使ったサービスを作ってみようかと思いました。

自分はサーバーやフロント周りが専門で、デザインに関しては業務的に必要最低限くらいの知識しかありませんでした。

サイトを少しでもリッチなUIにしたいなと思った際に、Vuetify.jsのフレームワークがドキュメントもしっかりしていてマテリアルデザインも使えて良さそうだなと思って入門してみました。

公式サイト:https://vuetifyjs.com/ja/

スポンサーリンク

Vuetifyとは

VuetifyとはVue.jsで使える、マテリアルデザインのコンポーネントフレームワークです。

コミュニティの活発性・コンポーネント多さ・CLIからのプロジェクト生成が容易にできる点が良さとしてあります。

サポートブラウザ

IE10以下が主に非対応となっていました。
※2019/10/07時点

・chromium
・FireFox
・Edge
・Safari 10+
・IE11 / Safari 9 (polyfill対応)
・IE9 / IE10 非対応

Vuetifyを導入してみる

まずは、Vue CLI 3を導入します。

# yarnで導入する場合
$ yarn global add @vue/cli
# npmで導入する場合
$ npm install @vue/cli -g

新しいプロジェクトのテンプレートを生成

# 新規プロジェクト作成
$ vue create sample-app
$ cd sample-app
$ vue add vuetify

アプリケーションを起動してみましょう

$ yarn serve
OR
$ npm run serve
.....
  App running at:
  - Local:   http://localhost:XXXX/  ←ローカル環境アクセス
ローカル環境にアクセス

上記のような画面が表示されたら、導入完了です!

数コマンド打つだけですので、すぐに設定できてしまうのが良いです。

Vue UIインストール(余談)

@vue/cliの新しいビジュアルアプリケーションであるUIからVuetifyをインストールしたい場合には、こちらを実行します。

// ensure Vue CLI is >= 3.0
$ vue --version
// Then start the UI
$ vue ui
別タブでVueプロジェクトマネージャが起動

まだプロジェクトがない場合、作成ボタンから新しくプロジェクトを作成します。

プロジェクト名・パッケージマネージャなどをUIで設定するだけです。
作成が完了すると以下のような画面が出ますので、左のプラグインを選択し、プラグンを追加ボタン押下後に「vuetify」で検索しましょう。

vue-cli-plugin-vuetify

対象のプラグインにチェックをして、右下インストールボタンを押すだけです。

しばらく待つと、、、導入完了となります。。。。便利ですね。

アプリの起動に関しても、タスクをクリックしてserveのタスクを実行をすると起動もしてくれます。完了後にアプリを開くボタンからVuetifyの画面が表示されます。(先ほどコマンドラインからインストールしたものと同じ)

複数のプロジェクト管理でしたり、非エンジニアの方でもUIからプラグインを入れたり、プラグインの依存関係であったりが閲覧できるので良くできてるなという感じでした。(完全に余談になりました)

まとめ

Vuetifyはcliから容易に追加ができ、デザインのサンプルコンポーネントの数もたくさんありますので、自分のような専属でデザインを領域としていないエンジニアがサービス開発をする上でとても効果的だと思いました。

プロジェクト内部のコードに関しては、また別途記事にしようと思います。