install libraries

Vue の Install

npm install vue
added 1 package, and audited 2 packages in 5s

found 0 vulnerabilities
npm notice 
npm notice New minor version of npm available! 7.6.1 -> 7.19.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.19.1
npm notice Run npm install -g npm@7.19.1 to update!

vue を npm でインストールした

しかし、このままでは vue コマンドは使えない

cli をインストールする

vue-cli で vue コマンドを使えるようにする

cli.vuejs.org

npm install -g @vue/cli

added 938 packages, and audited 939 packages in 2m

@vue/cli をグローバルインストールした

これで vue create が使える

vue create vuetify-try

vue プロジェクトを作成

vue アプリを動かす

npm run serve

f:id:kei_s_lifehack:20210707000412p:plain

localhost 8080 で vue app が動いているのを確認できた

vuetify

vue cli の vue add コマンドで vuetify を追加してみる

ctrl c
vue add vuetify
npm run serve

f:id:kei_s_lifehack:20210707002022p:plain

vuetify のテンプレートが見えた！

vuetify のイントロページのソースを見てみる

ソースを見てみる

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />


        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

template が全てを囲って

次に v-app でラップして

その下に v-app-var があって、ここが一番大きい

flex で中央揃えの div でラップされた

左上の vuetify のロゴ画像の v-img

左上の vuetify の文字画像の v-img

真ん中の v-spacer

右上に v-btn

その中に v-icon があり

f:id:kei_s_lifehack:20210708204429p:plain

こういうボタンが

<v-btn
  href="https://github.com/vuetifyjs/vuetify/releases/latest"
  target="_blank"
  text
>
  <span class="mr-2">Latest Release</span>
  <v-icon>mdi-open-in-new</v-icon>
</v-btn>

ここから生成される

その下は、hello world コンポーネントを呼び出しているのがわかった

Hello World Component

      <v-col
        class="mb-5"
        cols="12"
      >
        <h2 class="headline font-weight-bold mb-3">
          Ecosystem
        </h2>

        <v-row justify="center">
          <a
            v-for="(eco, i) in ecosystem"
            :key="i"
            :href="eco.href"
            class="subheading mx-3"
            target="_blank"
          >
            {{ eco.text }}
          </a>
        </v-row>
      </v-col>

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({
      ecosystem: [
        {
          text: 'vuetify-loader',
          href: 'https://github.com/vuetifyjs/vuetify-loader',
        },