Vue로 PWA 개발, ChatGPT가 시키는 대로 프론트엔드 UI를 만들었습니다.

Vue로 PWA 개발 - 그랜파 개발자.

 

ChatGPT 에게 상단 헤더, 하단, 그리고 사이드 메뉴로 구성되어 있는 UI의 예제를 요청하였습니다.
ChatGPT가 보여준 예제를 실행하여 봅시다.

프로젝트를 만들고 프로젝트 만들기에서 생성된 코드에서 App.Vue를 ChatGPT가 제공한 코드로 교체하여 실행합니다.

1. Vue 프로젝트 만들기

vue create my-pwa

 

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

2. vuetify 설치

cd my-pwa

vue add vuetify

 

? Choose a preset: (Use arrow keys)
Vuetify 2 - Configure Vue CLI (advanced)
> Vuetify 2 - Vue CLI (recommended)
Vuetify 2 - Prototype (rapid development)
Vuetify 3 - Vite (preview)
Vuetify 3 - Vue CLI (preview)

 

3. 실행

npm run serve

 

브라우저에서 http://localhost:8080으로 이동하면 앱을 볼 수 있습니다.

 

4. Vue 컴포넌트 (App.vue) 수정

<!-- src/App.vue -->
<template>
  <v-app>
    <!-- App Bar -->
    <v-app-bar color="primary" dark>
      <v-app-bar-nav-icon @click="toggleDrawer" />
      <v-toolbar-title>My App</v-toolbar-title>
    </v-app-bar>

    <!-- Navigation Drawer -->
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item-group>
          <v-list-item v-for="(item, index) in menuItems" :key="index">
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <!-- Main Content -->
    <v-main>
      <v-container>
        <h1>Welcome to My App</h1>
        <p>This is the main content area. Add your components here.</p>
      </v-container>
    </v-main>

    <!-- Footer -->
    <v-footer app color="secondary" dark>
      <v-container>
        <p>&copy; {{ new Date().getFullYear() }} My App. All rights reserved.</p>
      </v-container>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      menuItems: [
        { title: "Home", icon: "mdi-home" },
        { title: "About", icon: "mdi-information" },
        { title: "Contact", icon: "mdi-phone" },
      ],
    };
  },
  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
  },
};
</script>

<style>
body {
  margin: 0;
}
</style>

5. 다시 실행

 

보기 좋은 UI가 만들어졌습니다.
그런데 메뉴를 클릭해도 반응이 없습니다.
당연하게 이동할 페이지도 없고, 라우터도 없기 때문입니다.

 

Vue 프로젝트 Beta Test : mylog, 일상의 기록