vue.jsとはのバックアップ(No.3)

<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ール †

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

いくつか選択肢がでてくる

↑

レイアウト †

Vueの機能は使わず、基本的にCSSのみで解決することをまずかんがえましょう。最初からVueのUIライブラリやCSSフレームワークのgridモジュールを探しに行かないほうが良いです。

↑

Vueの機能を使わずに、レイアウト †

↑

画面を分割する †

CSS grid layoutを使う

https://ics.media/entry/15649

↑

いくつかのDIVを等幅で並べる †

flexboxを使う

https://qiita.com/takanorip/items/a51989312160530d89a1

↑

ボタン等をボックスの右端とかに固定する †

閉じるボタンとか

position: absoluteを使う

https://saruwakakun.com/html-css/basic/relative-absolute-fixed

↑

中央寄せする †

https://yoshiko-pg.github.io/slides/20151215-scripty/

↑

Vueの機能をつかってレイアウト †

nuxt.jsのlayoutsを使うのが、効率がよいらしい。

https://ja.nuxtjs.org/api/pages-layout/

↑

Vue CLIで作成したプロジェクトのレイアウトを変更 †

https://qiita.com/whoshino/items/22426bd18b5ac7e192b0

↑

UI †

↑

UIの実装例をたくさん載せてるサイト †

↑

onsen †

https://ja.onsen.io/v2/api/vue/v-ons-splitter.html

↑

vueitfy †

https://vuetifyjs.com/ja/components/expansion-panels

↑

vue material †

https://vuematerial.io/components/menu/

↑

個別にコンポーネントを調べるには †

google とかで、vue splitterとかで、検索すると、まとまってるサイトを

いくつか見つけることができる

↑

vue-splitter †

https://github.com/rmp135/vue-splitter

↑

UI部品化には、Elementをつかうのでインストール †

npm install element-ui -S

↑

アプリケーションでの利用 †

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 })

vue.jsとは のバックアップ(No.3)

目次 †

vue.jsとは †

本家 †

スタイルガイド †

簡単なサンプル †