#48 Vue.js + Rails アプリ開発アウトプット
こんばんは！hiroです😃
5月22日は "イエメン・ナショナルデー" です。1990年(平成2年)のこの日、 "イエメン・アラブ共和国" と "イエメン民主人民共和国" が統合され、イエメン共和国となったことを記念とする日みたいです。
こういう機会でしか調べないので、少しイエメン共和国について調べてみました。首都はサヌアになります🇾🇪公用語はアラビア語、人口は約2,900万人（2018年現在）です。主要産業は、 "石油" "天然ガス産業" "農業" "漁業" になります。アラブの最貧国の1つで、全人口の8割にあたる約2,400万人が何らかの人道支援と保健を必要としているみたいです。特に "食料" "医療" "衛生状況" は深刻で、約1,000万人が慢性的な食料不足状態にあるとの事です。
▼詳細はこちら
https://www.mofa.go.jp/mofaj/area/yemen/data.html
本日も学習した内容をアウトプットをします！😃
Vuetify
■public/index.htmlファイル
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.js"></script>
<title>Snippet App</title>
</head>
<body>
<v-app id="app">
<v-toolbar color="red lighten-3" dark>
<v-toolbar-title>Snippet App</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat>New Snippet</v-btn>
</v-toolbar>
</v-app>
<script>
new Vue({
el: '#app',
data(){
return{
}
},
mounted(){
},
methods:{
}
})
</script>
</body>
</html>・Vue.jsのUIライブラリー。Googleが提唱したマテリアルデザインにのっとっており、直感的で使いやすいコンポーネントを利用することが出来る。
・デザインの知識が全く無くても、簡単にUIを作れる便利なもの。
■public/index.html（Googlefontの読み込み）headタグ2行目に記述
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
■public/index.html（Vuetify で指定されている css ファイルの読み込み）
headタグ3行目に記述
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.min.css" rel="stylesheet">
■public/index.html（Vuetify の JavaScriptファイル を CDN から読み込ませる）headタグ5行目に記述
<script src="https://cdn.jsdeliver.net/npm/vuetify@1.5/dist/vuetify.js"></script>
・<body>タグ1行目、<div id='app'> の代わりに "<v-app id='app'>" とする。
・<body>タグ2行目、 "v-toolbar" はツールバーを表示。
・<body>タグ3行目、 "v-toolbar-title" はツールバーのタイトルを表示。
・<body>タグ4行目、 "v-spacer" は、余白を作成。このタグのあとに指定されたタグは "右寄せ" で配置される。
・<body>タグ5行目、 "v-btn" で、ボタンを配置。
・ v- から始まる Vuetify で使えるパーツのリストや使い方の詳細はこちら。
https://v15.vuetifyjs.com/ja/getting-started/quick-start/
普段実装するHTML/CSSよりも記述が簡単で、今回記述した内容だけで以下の装飾が出来ました！すごい便利です😃
https://gyazo.com/229ea20fbda8e2af75b7659c2d21a144
Vuetifyを習得する事で実装の幅も広がると思うので、引き続き学習を進めていきます😇
本日も最後まで読んで頂き、ありがとうございました！🙇♂️
※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇
■参考教材TechPit
Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！