Vuetifyやーる #Vue #Vuetify

1．Private レポジトリを作成 

https://github.com/staticwebdev/vue-basic/generate

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/02023f72-4620-a8e5-aba9-9984dafb908e.png)

2．作ったレポジトリをクローン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/714bd40f-227b-3d06-01f0-6492c665d9b6.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6721329d-48d3-14ac-81b1-b8b71b2e218a.png)

3．Azure Static Web App 拡張機能を入れる
なんかGitHubの権限でエラー出たのでVSCodeからStatic Web Appを作るのやめた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/8ce05aa2-864b-a05b-4e90-77fe79fe1f0e.png)

4．Azureポータルから静的Webアプリを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/591ba38d-c515-c913-4591-e4c2cedb99be.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/13c79cfd-60df-55cf-67b9-5024005a0cd8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/a64b59af-2c56-ca70-f88f-b99586e75a79.png)

デプロイが完了したら、URLにアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/757444bf-4efc-2531-22e6-60cadd08a15a.png)

Git Actionsでデプロイ中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2a886040-e63f-d9f3-9a75-af8266566af2.png)

完了したらこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e41f56fb-29f5-b646-5166-6ec5479a7e93.png)

5．ローカルで開発

git clone 
cd vuetify-samples


npm install
npm run serve
http://localhost:8080/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/432c2fdd-f3c2-f85d-d7c7-a37da1fbf987.png)

vue cliは最初から入っているので以下はやらなくてOK。入れたい場合は、
https://qiita.com/C_HERO/items/318fe65871f8e53e8c80 を参考に

~~~console 
npm install -g @vue/cli
~~~

~~~
vue --version 
@vue/cli 4.5.12
~~~

vue uiを立ち上げる

~~~
vue ui
~~~

インポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/495992d9-5862-2d60-2072-049c7a0c46b0.png)

フォルダを選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/c76b6df7-496d-24a8-f55e-98a83d002404.png)

プラグインから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/f082a80a-af5c-02c2-889e-64db9b4c5c46.png)

vuetifyをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/fabec942-3fd6-e4ca-7b01-a53fa518432c.png)


インストールを終了する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/83f00a08-47c8-c353-67db-57d91e39e284.png)

起動できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/850e74d0-c859-409e-314f-f0b1e273519d.png)

http://localhost:8080/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d401c7d9-4f7e-6777-93c3-c898a664beab.png)

App.vue 

~~~
<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>
~~~


header
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/cb191938-3dbc-f3fe-7670-9a5a7c365ee3.png)

v-footer
https://vuetifyjs.com/ja/components/footer/#padless-footer
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/bf18f131-cc12-005c-47e7-897f8de4391b.png)

App.vue

~~~
<template>
  <v-app>
    <Header/>
    <v-main>
      <HelloWorld/>
    </v-main>
    <Footer/>
  </v-app>
</template>

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

export default {
  name: 'App',

  components: {
    HelloWorld,
    Header,
    Footer,
  },

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

vue router 
App.vueが書き換わるので注意

~~~
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
~~~



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/b9aeaefd-1764-f28a-e8a1-80d9860d157c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2e42621f-edd4-11b6-bd24-c912c7be2e66.png)

form
https://vuetifyjs.com/ja/components/forms/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/789f350f-c126-d2d0-83a5-b0c53e9db29a.png)

API
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3daeb91c-da22-9f3b-adb3-06290dda1227.png)

[成果物](https://ashy-meadow-05b6b6510.azurestaticapps.net/)



# 参考
https://qiita.com/SatoshiGachiFujimoto/private/88facae796dd4d2e769d