[Vue.js] Side Project Tools 만들기 (2)

미니

---

Common Component

Header

Header에서 navigation을 사용 할 생각이다.

원래는 Footer에서 하려했지만 계속해서 메뉴들을 추가 할 것이기 때문에 상단에서 사용하는게 좋을 것 같다.

Vuetify를 사용해 간단하게 Header를 구현하자.

// components/common/MiniHeader.vue
<template>
  <v-toolbar density="compact" border :elevation="8" theme="dark" with-background fixed app>
    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
    <img class="ml-3" :src="require('@/assets/mini_small.png')" height="40" />
    <v-toolbar-title class="text-h4">미니 기여어</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>mdi-reply</v-icon>
    </v-btn>
  </v-toolbar>
  <v-navigation-drawer v-model="drawer" color="#424242">
    <v-list>
      <v-list-item class="mb-2" :prepend-avatar="require('@/assets/mini_profile.png')">
        <v-list-item-title class="미니기여어"> 미니 기여어 </v-list-item-title>
      </v-list-item>
      <v-divider></v-divider>
      <v-list-item
        v-for="(item, index) in menuItems"
        :key="index"
        :prepend-icon="item.icon"
        :to="item.link"
        @click="navigate(item)"
        :class="[{ 'v-list-item--active': item.link === $route.path }]"
      >
        <v-list-item-title>
          {{ item.title }}
        </v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      menuItems: [
        { icon: "mdi-home", link: "/", title: "홈" },
        { icon: "mdi-food", link: "/lunch", title: "뭐 먹 지" },
        { icon: "mdi-coffee", link: "/coffee", title: "커 피 사 줘" },
      ],
    };
  },
  methods: {
    navigate(item) {
      this.$router.push(item.link);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/common/font.css";

div {
  font-family: "UhBeemysen";
}

.v-list-item-title {
  font-size: 1.4rem !important;
}
.미니기여어 {
  font-size: 1.6rem !important;
}

.v-spacer {
  flex-grow: 0 !important;
}

.v-list-item--active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>

 

Vuetify는 tag를 사용하여 수많은 components를 제공한다.

Vuetify 공식문서 : https://vuetifyjs.com/en/getting-started/installation/#installation

Get started with Vuetify 3 — Vuetify

생각보다 사용법이 복잡하니 간단한 강의를 통해서 배우는것도 좋을 것 같다.

Vuetify의 태그들은 반응형으로 작동한다.

태블릿, 모바일

데스크탑

태블릿, 모바일에선 show hide로 사용되고 데스크탑에선 show로 구현된다.

// ...
<v-list-item
v-for="(item, index) in menuItems"
:key="index"
:prepend-icon="item.icon"
:to="item.link"
@click="navigate(item)"
:class="[{ 'v-list-item--active': item.link === $route.path }]" // route
>

// ...
// 메뉴 data
menuItems: [
{ icon: "mdi-home", link: "/", title: "홈" },
{ icon: "mdi-food", link: "/lunch", title: "뭐 먹 지" },
{ icon: "mdi-coffee", link: "/coffee", title: "커 피 사 줘" },
],

menu들을 data에서 관리해주고 router기능을 통해 url을 변경하며 SPA 방식으로 화면을 구현한다.

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import MiniHome from "../views/MiniHome";
import MiniLunch from "@/views/MiniLunch";
import MiniCoffee from "@/views/MiniCoffee";

const routes = [
  {
    path: "/",
    name: "home",
    component: MiniHome,
  },
  {
    path: "/lunch",
    name: "lunch",
    component: MiniLunch,
  },
  {
    path: "/coffee",
    name: "coffee",
    component: MiniCoffee,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

router/index.js에서 routes를 관리하며 보여질 화면을 추가해주면 된다~

---

Footer

Footer에선 내 저작권과 나의 모든 것을 넣어놨다.

시간나면 들어와주길 바란다.

별거 없기 때문에 넘어가겠다.

// components/common/MiniFooter.vue
<template>
  <div>
    <a href="https://github.com/SoominYim" title="git_hub" class="sns" target="blank">
      <i class="fa-brands fa-github"></i>
    </a>
    <a href="https://www.instagram.com/_soo_min_/" title="instagram" class="sns" target="blank">
      <i class="fa-brands fa-instagram"></i>
    </a>
    <a href="https://www.facebook.com/profile.php?id=100002681110982" title="facebook" class="sns" target="blank"> <i
        class="fa-brands fa-facebook"></i>
    </a>
    <a href="https://s-o-o-min.tistory.com/" title="tistory" class="sns" target="blank"> <i class="fa-solid fa-t"></i></a>
    <span>© {{ new Date().getFullYear() }}. S-o-o-Min . All rights reserved.</span>
  </div>
</template>

<script>
export default {
  name: "BlogFooter",
};
</script>

<style lang="scss" scoped>
div {
  height: 40px;
  text-align: center;

  .sns {
    color: #fff;
    font-size: 20px;
    padding: 0 10px;

    &:hover {
      color: #888;
    }

    transition: all 0.5s ease;
  }

  span {
    font-size: 10px;
    display: block;
    height: 10px;
    margin-top: 6px;
    color: #fff;
  }
}
</style>

---

common component를 살펴봤다.

home 페이지를 구상중인데 아마 날씨로 할 것 같다.

다음 글에선 home을 만들어 보겠다.