フリーランス　技術調査ブログ

フリーランス/エンジニア　Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

nuxt.js Vuetifyの勉強にはデフォルトのテンプレートを利用してから勉強した方がよい

nuxtjs

Vuetifyの勉強方法

  • 数あるCSSフレームワークのなかで、自分はVuetifyを選択した理由はBootstrapよりもコンポーネントが多く。デザイナーではない自分にはCSSをゴリゴリにいじらなくても簡易的なデザインであれば出来るのかと思い選択してみました。ですがどこから手をつけていいか分らず、コンポーネントのタグを入れても想定したデザインにならず。

再度アプリケーションを作成しなおす

  • 最初はアプリケーションを作成するときに利用するCSSフレームワークを指定せず、 none を選択していたが、これだと素人では何もわからず。アプリケーションを再度作成しなおし、CSSフレームワークの指定の箇所でVuetify.jsを指定する
# yarn init
# yarn add nuxt
# yarn create nuxt-app example
> Yarn
> Vuetify.js
> Axio
> Single Page App
  • 上記の指定でアプリケーションを作成するとデフォルトで、layoutファイルやpageを２ページのサンプルが出来上がる。下記の参考ページを見ることである程度、タグの意味や入力チェックのイメージをつかむことができました。次回はVuexを利用して画面遷移時にデータを持ちまわる仕組みを作りたいと思います。

https://dev83.com/vue-vuetify-basic/ https://qiita.com/tekunikaruza/items/0a68d86084d961d632ac

f:id:PX-WING:20191226193834p:plain

自分が検証しているPCはこちらです。