[Vue - Express - Mysql 로그인 프로젝트] 2. Vuetify를 이용한 화면 구현

Vuetify란? Material Design이 적용된 디자인 방식입니다. 구글에서 개발이 되었고 vuetify개발을 하면서 디자인이 눈에 익으면 비슷한 느낌의 어플리케이션을 많이 발견할 수 있을 겁니다.

 

vuetify 설치 명령어 입니다.

vue add vuetify

 

버전선택 화면이 나옵니다. Default를 선택합니다.

설치가 완료되면 ~/src/plugins경로에 vuetify.js가 추가된 것을 확인할 수 있고

 

npm run serve로 서버를 실행하면 아래 그림처럼 Vuetify가 적용된 것을 확인할 수 있습니다.

vuetify가 적용된 모습

 

Vuetify에서 제공하는 Card디자인과 textfiled, Button등 을 조합하여 간단하게 만든 모습입니다.

vue-로그인 화면 만들기

 

 

최초 App.vue의 코드를 지우고 view폴더에 Login.vue 를 따로 만들어 import하도록 합니다.

App.vue 코드 입니다.

// ~/App.vue

<template>
  <Login></Login>
</template>

<script>
import Login from "./views/Login.vue";
export default {
  name: "App",

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

 

Login.vue 코드입니다.

<template>
  <v-app id="inspire">
    <v-main class="blue-grey lighten-4">
      <!-- Login Component -->
      <v-container style="max-width: 450px" fill-height>
        <v-layout align-center row wrap>
          <v-flex xs12>
            <v-card>
              <div class="pa-10">
                <h1 style="text-align: center" class="mb-10">Login</h1>
                <form>
                  <v-text-field
                    label="ID"
                    prepend-inner-icon="mdi-account"
                  ></v-text-field>
                  <v-text-field
                    prepend-inner-icon="mdi-lock"
                    type="password"
                    label="Password"
                  >
                  </v-text-field>
                  <v-btn
                    type="submit"
                    color="blue lighten-1 text-capitalize"
                    depressed
                    large
                    block
                    dark
                    class="mb-3"
                  >
                    Login
                  </v-btn>
                  <v-btn
                    @click="addUserShow"
                    color="blue lighten-1 text-capitalize"
                    depressed
                    large
                    block
                    dark
                  >
                    Sign Up
                  </v-btn>
                </form>
              </div>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  components: {},
  computed: {},
  methods: {},
};
</script>

 

 

현재까지 폴더 구조입니다.

 

Home.vue 로그인 되었을 때 화면도 하나 만들어보겠습니다.