Vue로 PWA 개발, ChatGPT의 프론트엔드 앱 Vuetify 예제를 실행해 봅시다.

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

 

ChatGPT의 Vuetify 설명에서 보여준 예제 코드를 실행하여 봅시다.

프로젝트를 만들고 예제 코드를 코딩한 후 실행합니다.

 

1. 프로젝트 만들기

vue create vuetify-app

 

Vue CLI v5.0.8
? 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? No

 

2. Vuetify 설치

cd vuetify-app

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. App.vue

<!-- src/App.vue -->
<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <v-toolbar-title>Vuetify App</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-row>
          <v-col cols="12" md="4">
            <v-card>
              <v-card-title>Card 1</v-card-title>
              <v-card-text>This is the first card.</v-card-text>
            </v-card>
          </v-col>
          <v-col cols="12" md="4">
            <v-card>
              <v-card-title>Card 2</v-card-title>
              <v-card-text>This is the second card.</v-card-text>
            </v-card>
          </v-col>
          <v-col cols="12" md="4">
            <v-card>
              <v-card-title>Card 3</v-card-title>
              <v-card-text>This is the third card.</v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App'
};
</script>

 

4. 실행

npm run serve

 

npm run serve로 로컬 서버를 시작한 후 브라우저에서 http://localhost:8080으로 이동하면 앱을 볼 수 있습니다.

 

 

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