Vuetify.jsでマテリアルデザインことはじめ ITかあさん

ITかあさん

Vuetify.jsでマテリアルデザインことはじめ

Vuetify.jsでマテリアルデザインことはじめ

スクリーンショット 2018-05-24 11.01.40.png (249.0 kB)

昨日Nuxt.jsの環境構築の記事を書かせて頂きましたが、テンプレートの変更や、ページの追加に触れてNuxt.jsの入門は終了したいと思います。

自分の作ったアプリケーションにcdで移動

$cd jsfes_nuxt/your-app-name

 

Nuxtのプロジェクトはこんな感じです。

your-app-name $ls -ll
total 752
-rw-r--r--    1 chihiro.matsuda  staff     376  5 19 00:42 README.md
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 assets
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 components
drwxr-xr-x    4 chihiro.matsuda  staff     128  5 19 00:42 layouts
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 middleware
drwxr-xr-x  808 chihiro.matsuda  staff   25856  5 19 00:43 node_modules
-rw-r--r--    1 chihiro.matsuda  staff    1655  5 19 00:42 nuxt.config.js
-rw-r--r--    1 chihiro.matsuda  staff  369890  5 19 00:42 package-lock.json
-rw-r--r--    1 chihiro.matsuda  staff     702  5 19 00:42 package.json
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 pages
drwxr-xr-x    4 chihiro.matsuda  staff     128  5 19 00:42 plugins
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 static
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 store

 

Sassを使えるようにする

生でCSSはもう書きたくないですね。そこで、Sassを使えるようにする必要があります。
package.jsonのあるディレクトリでnpmでパッケージをインストールします

$ npm install --save-dev node-sass sass-loader

 

nuxt.config.jsで使えるスタイルシートを追加する

assetsにディレクトリにscssフォルダを切って、そこにtodo.scssを追加することにしました。

  /*
  ** Global CSS
  */
  css: [
    'vuetify/src/stylus/main.styl',
    '@/assets/scss/todo.scss'
  ],

 

scss

sassが無事使えることだけを確認したいので、文字色を赤くするだけで試します

$red: red;
blockquote {
    color: $red;
}

 

スクリーンショット 2018-05-24 10.58.23.png (21.3 kB)
http://localhost:3000/inspire
にアクセスすると、更新ボタンを押さずにリアルタイムにブラウザに変更が保存されますね(SSRさまさまやで)

新規テンプレートの追加

現在はVuetifyのデフォルトテンプレートですので、白地にVuetifyのグリッドデザインでサンプルを作ってみます。

出来上がりの様子

スクリーンショット 2018-05-24 11.01.40.png (249.0 kB)
DoorKeeper のAPIを使って、イベントを取得してVuetifyのグリッドで表示してみました。もちろん、APIを叩くにはNuxt.jsの環境構築の際にインストールしたaxiousを使っています。

テンプレートの追加

テンプレートの追加は非常に簡単です。layoutsフォルダがありますので、新たにファイルを追加するだけです。
スクリーンショット 2018-05-24 11.06.10.png (8.3 kB)

event.vue

を追加しました

ファイルの中身についてはこちらのgistをご確認ください。

いよいよオリジナルページの追加

いよいよオリジナルページの追加です。pagesディレクトリに.vueファイルを追加するだけ
スクリーンショット 2018-05-24 11.11.13.png (10.8 kB)

さきほど追加したテンプレートでpageを読み込むにはこれだけ。

<script>
  export default {
    layout: 'event',
  }
</script>

 

こちらもAPIの接続のソースコード含めてgistからご確認ください。

今度はゆっくりとaxiousの解説記事を書きたいと思います。

初夏のJavaScript祭 in サーキュレーションビル ForPro