Vue Editor を作る

要件

Vuetify を使用

3 つの components からなるようにする

www.justinmind.com

これを参考に作る

アプリの作成

vue create editors

Vue CLI v4.5.13
✨  Creating project in /Users/kaede0902/code/editors.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 1283 packages in 2m

120 sec かかった。長い

v-container のグリッドが動くのを確認する

npm i vuetify

vuetify をまず入れて

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <h2>Editor A</h2>
        </v-col>
        <v-col>
          <h2>Editor B</h2>
        </v-col>
        <v-col>
          <h2>Editor C</h2>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

コンテナに ROW ( 縦に伸びる ) を入れてその中に COL ( 横に伸びる ) を 3 ついれる

これで並んでいるのを確認

      <v-row align="center" >
        <v-col>
          <h2>Editor A</h2>
        </v-col>
      </v-row>
      
      <v-row>
        <v-col>
          <h2>Editor B</h2>
        </v-col>
        <v-col>
          <h2>Editor C</h2>
        </v-col>
      </v-row>

中央揃えにする

まずこれをしないと見にくい

意外と探すのに苦戦したが

stackoverflow.com

      <v-row align="center" >
        <v-col>
          <h2>Editor A</h2>
        </v-col>
      </v-row>
      
      <v-row>
        <v-col>
          <h2>Editor B</h2>
        </v-col>
        <v-col>
          <h2>Editor C</h2>
        </v-col>
      </v-row>

これで、align="center" がついているところは中央揃えになっていることを確認できる。