こんにちは！スギモトです！
以前、Vuetifyをちょっとだけ試してみたところ意外にもアクセスが多かったので驚いています。このフレームワークそんなに検索されるんですね。Vueでマテリアルデザインに対応しているものが少ないからでしょうか。
キーワード的には「Vue.js」「vue-cli」が多かったのですが、あまり記事と関係ないような……。
で、今回ですが、なんと最近Vue-cliの3系が登場しています。
しかも、VuetifyもVue-cli3系に対応しているではないですか！
そこで今回は、お盆休みで手持ち無沙汰なのでVue CLI-3 ＋ Vuetifyをサクッと試してみようと思います。
Webpack 4 + Vue-Cli 3 + Vuetifyでプロジェクトを作成してみる！
前提条件
- Win10
- VSCode 1.26.0
- Vue-cli@3.0.0
- Vue@2.5.17
- Vuetify@1.1.11
- Webpack@4.16.5
npm導入済みという前提で進めます。
準備
vue-cli 3をインストールしていない方はまずは導入しましょう。
npm install @vue/cli -g
続いてプロジェクトを作成します。
vue create my-app
プロジェクトにVuetifyを追加
vue add vuetify
コマンドを実行すると色々聞かれるので適当に選択。
（ちなみに下記のようにしました）
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes ? Use custom theme? Yes ? Use a-la-carte components? No ? Use babel/polyfill? Yes
ここまでで、Vue.jsのサンプルプロジェクトは完成のはずです。
動作確認したい方は下記のコマンドを実行してみてください。
npm run serve
立ち上がったと思います。
以前はVuetifyをinstallしたあと、色々importしていましたが今回は不要です。自動でセッティングしてくれるようで、便利ですね。
たたし、Vuetifyのバージョンが1.0.19でしたので、自分で最新版（このエントリー投稿時点では1.1.11）にアップデートしました。
npm i vuetify@1.1.11
コンポーネントを使ってみる
Vuetifyには多くのコンポーネントがあります。
詳しくは公式サイトでご確認ください。
今回は業務系システムは必須であろうDataTableを使ってみようと思います。
コンポーネント名「v-data-table」をtempleteに追加することで利用できます。
サンプルコードをただ貼り付けるだけでも、データテーブルが表示されました。
標準で列ソート、全文検索、全レコード選択、ページネーションなどの機能があってとても使い勝手がいいです。
ただ、ヘッダーとフッターを固定することができないのはなぜなのか……。
まとめ
どうやらVuetify v1.2の登場が間近のようです。
新しいコンポーネントが追加されたり、v1.1までのコンポーネントにも若干の修正が入っている模様。
まだベータ版なので、正式にリリースされたら試してみようと思います。
Vuetify楽しい！
