소개

먼저 만든 것을 올려 둡니다.

데모

코드

사전 준비

VueCLI3을 설치하십시오.

【Vue】 프로젝트 만들기

terminal

$ vue create vuetify-vuerouter-navbar-example

몇 가지 질문이 표시되므로

Manually select features 선택

Router를 추가하십시오

그 외는 기호로 부디

terminal

Vue CLI v3.7.0
┌───────────────────────────┐
│  Update available: 3.8.2  │
└───────────────────────────┘
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

terminal

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Vuetify 추가

프로젝트 바로 아래로 이동하여 Vuetify를 설치합니다.

terminal

$ cd vuetify-vuerouter-navbar-example
$ vue add vuetify

사전 설정은 Default (recommended)를 선택하십시오.

terminal

? Choose a preset:
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

서버 시작

terminal

$ yarn serve

http://localhost-8080.com/ 브라우저에서 열기
Welcome to Vuetify 문자가 나오면 괜찮습니다.

프로젝트 확인

plugins 디렉토리에 vuetify.js가 만들어졌습니다.
main.js에서 가져온 것 같습니다.

src/plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";
import "vuetify/src/stylus/app.styl";

Vue.use(Vuetify, {
  iconfont: "md"
});

src/main.js

import Vue from "vue";
import "./plugins/vuetify";

// ... 略

구성 요소 만들기

여기에서 드디어 본제입니다.
Header.vue를 만들고 탐색 내용을 설명합니다.

src/components/Header.vue

<template>
  <div>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list class="pa-1">
        <v-list-tile avatar>
          <v-list-tile-avatar>
            <img src="https://randomuser.me/api/portraits/men/85.jpg" />
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>John Leider</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
      <v-list>
        <v-text-field
          clearable
          flat
          label="Search"
          prepend-inner-icon="search"
          solo
          single-line
          hide-details
        ></v-text-field>
      </v-list>
      <v-list class="pt-0" dense>
        <v-divider></v-divider>
        <v-list-tile v-for="item in items" :key="item.title" :to="item.to">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar dark color="primary" clipped-left fixed app>
      <v-toolbar-side-icon
        @click.stop="drawer = !drawer"
        class="hidden-md-and-up"
      ></v-toolbar-side-icon>
      <v-toolbar-title class="headline text-uppercase white--text">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-expand-x-transition>
        <v-text-field
          class="hidden-sm-and-down"
          clearable
          flat
          label="Search"
          prepend-inner-icon="search"
          solo-inverted
          single-line
          hide-details
          v-show="showSearchInput"
        ></v-text-field>
      </v-expand-x-transition>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn icon @click="showSearchInput = !showSearchInput">
          <v-icon>search</v-icon>
        </v-btn>
        <v-btn flat to="/">Home</v-btn>
        <v-btn flat to="/about">About</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      drawer: null,
      showSearchInput: false,
      items: [
        { title: "Home", icon: "dashboard", to: "/" },
        { title: "About", icon: "question_answer", to: "/about" }
      ]
    };
  }
};
</script>

네비게이션 및 사이드 패널

아래를 참고로 했습니다.

Navigation drawer — Vuetify.js

Toolbars — Vuetify.js

애니메이션

<v-expand-x-transition> 에서 검색 박스의 표시 전환시에 애니메이션을 붙이고 있습니다.

Transitions — Vuetify.js

v-expand-x-transition

<v-expand-x-transition>
  <v-text-field
    class="hidden-sm-and-down"
    clearable
    flat
    label="Search"
    prepend-inner-icon="search"
    solo-inverted
    single-line
    hide-details
    v-show="showSearchInput"
  ></v-text-field>
</v-expand-x-transition>

브레이크 포인트

hidden-md-and-uphidden-sm-and-down에서 화면 사이즈에 따라 표시 전환을 하는 브레이크 포인트를 붙이고 있습니다.

Display helpers — Vuetify.js

hidden-md-and-up

<v-toolbar-side-icon
  @click.stop="drawer = !drawer"
  class="hidden-md-and-up"
></v-toolbar-side-icon>

hidden-sm-and-down

<v-toolbar-items class="hidden-sm-and-down">
  <v-btn icon @click="showSearchInput = !showSearchInput">
    <v-icon>search</v-icon>
  </v-btn>
  <v-btn flat to="/">Home</v-btn>
  <v-btn flat to="/about">About</v-btn>
</v-toolbar-items>

App.js에서 Header.vue 호출

src/App.vue

<template>
  <v-app>
    <Header />
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <router-view></router-view>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "App",
  components: {
    Header
  }
};
</script>

자, 완성되었으므로 다시 http://localhost-8080.com/에 액세스하여 확인합시다.
이런 표시가 되어 있으면 OK입니다.

결론

끝까지 읽어 주셔서 감사합니다.
Vuetify는 Theme도 공개 된 것 같습니다.
그 중에는 무료 물건도있는 것 같기 때문에 시도해 보는 것은 어떻습니까?
Free / Premium Themes — Vuetify.js

Vue.js는 매우 힘들다 😁