Vuetify.jsでマテリアルデザインことはじめ
Vuetify.jsでマテリアルデザインことはじめ
昨日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;
}
http://localhost:3000/inspire
にアクセスすると、更新ボタンを押さずにリアルタイムにブラウザに変更が保存されますね（SSRさまさまやで）
新規テンプレートの追加
現在はVuetifyのデフォルトテンプレートですので、白地にVuetifyのグリッドデザインでサンプルを作ってみます。
出来上がりの様子
DoorKeeper のAPIを使って、イベントを取得してVuetifyのグリッドで表示してみました。もちろん、APIを叩くにはNuxt.jsの環境構築の際にインストールしたaxiousを使っています。
テンプレートの追加
テンプレートの追加は非常に簡単です。layoutsフォルダがありますので、新たにファイルを追加するだけです。
event.vue
を追加しました
ファイルの中身についてはこちらのgistをご確認ください。
いよいよオリジナルページの追加
いよいよオリジナルページの追加です。pagesディレクトリに.vueファイルを追加するだけ
さきほど追加したテンプレートでpageを読み込むにはこれだけ。
<script>
export default {
layout: 'event',
}
</script>
こちらもAPIの接続のソースコード含めてgistからご確認ください。
今度はゆっくりとaxiousの解説記事を書きたいと思います。