* 目次 [#e9b868b6] #contents * vue.jsとは [#s100c20d] ざっくりいうと、JavaScript のデータと HTML の要素を紐付けて、 データが変われば勝手に表示に反映してくれます。 毎回データと表示を同期させる処理を自分で書かなくてもよくなり、 インタラクティブなページや状態管理が活躍するページを作りやすくなります。 ** 本家 [#m61e4cb8] https://jp.vuejs.org/index.html 日本語の情報が豊富 *** スタイルガイド [#h535dfce] https://jp.vuejs.org/v2/style-guide/index.html 優先度 A,Bあたりは、必読 ** 簡単なサンプル [#cc8e072d] index.html <html> <head> <link rel="stylesheet" href="css/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="index01"> ユーザ名 : {{ name }} <p>TODO</p> <li v-for="item in items" :key="item.id" > {{ item.id + ":" + item.name }} </li> </div> <script src="index.js"></script> </body> </html> index.js var app = new Vue({ el: '#index01', data: { name: 'ぷーさん', items: [ { id:1, name: 'はちみつなめる' }, { id:2, name: 'さんぽする' }, { id:3, name: 'おひるねする' }, ] } }); * vue-cli のインスト npm install -g vue-cliール [#h2341bfd] nodeのインストールが済んでいることを確認 $ node -v v10.16.0 次のコマンドでインストール npm install -g vue-cli 確認 $ vue --version 2.9.6 プロジェクトの作成 vue init <template> <project-name> よくサンプルで、出てくるのは、以下の通り、 vue init webpack vue-template いくつか選択肢がでてくる ** テンプレート [#kdfd68b6] https://sounansa.net/archives/2360 *** template構文 [#p96465c1] https://jp.vuejs.org/v2/guide/syntax.html *** template書き方 [#ubaec75e] https://qiita.com/seya/items/93a0055c8fdab62d584f * レイアウト [#rf2af3d9] Vueの機能は使わず、基本的にCSSのみで解決することをまずかんがえましょう。 最初からVueのUIライブラリやCSSフレームワークのgridモジュールを探しに行かないほうが良いです。 **Vueの機能を使わずに、レイアウト [#nea46f82] *** 画面を分割する [#cd141dce] CSS grid layoutを使う https://ics.media/entry/15649 *** いくつかのDIVを等幅で並べる [#hfc0fda0] flexboxを使う https://qiita.com/takanorip/items/a51989312160530d89a1 *** ボタン等をボックスの右端とかに固定する [#wd6f27c6] 閉じるボタンとか position: absoluteを使う https://saruwakakun.com/html-css/basic/relative-absolute-fixed *** 中央寄せする [#m5dbb6f6] https://yoshiko-pg.github.io/slides/20151215-scripty/ ** Vueの機能をつかってレイアウト [#h502c1a4] nuxt.jsのlayoutsを使うのが、効率がよいらしい。 https://ja.nuxtjs.org/api/pages-layout/ ** Vue CLIで作成したプロジェクトのレイアウトを変更 [#z442a2de] https://qiita.com/whoshino/items/22426bd18b5ac7e192b0 * UI [#m1341cc4] ** UIの実装例をたくさん載せてるサイト [#pef00cbb] ** onsen [#t3661891] https://ja.onsen.io/v2/api/vue/v-ons-splitter.html ** vueitfy [#z22e7a6a] https://vuetifyjs.com/ja/components/expansion-panels ** vue material [#zb6eb71a] https://vuematerial.io/components/menu/ ** 個別にコンポーネントを調べるには [#qac5d587] google とかで、vue splitterとかで、検索すると、まとまってるサイトを いくつか見つけることができる *** vue-splitter [#l963ae9c] https://github.com/rmp135/vue-splitter * UI部品化には、Elementをつかうのでインストール [#h3f93c9e] npm install element-ui -S ** アプリケーションでの利用 [#g319a48b] import Vue from 'vue' import Element from 'element-ui' import locale from 'element-ui/lib/locale/lang/ja' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element, { locale })