2. 동네 (예약) 포털 - Vue 3 + Vite + Vuetify 3 + JS 프로젝트

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.

서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.

Vue 3 + Vite + Vuetify 3 + JS 프로젝트 세팅

1. 프로젝트

npm create vite@latest booking-portal -- --template vue
cd booking-portal

---

2. 의존성 설치

npm install vuetify@^3 @mdi/font sass vite-plugin-vuetify

---

3. vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }),
  ],
})

---

4. src/plugins/vuetify.js

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
})

---

5. src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import { vuetify } from './plugins/vuetify'

import '@mdi/font/css/materialdesignicons.css'

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

---

6. src/App.vue

<template>
  <v-app>
    <v-main>
      <v-container class="pa-4">
        <v-btn color="primary" @click="hello">
          Vuetify 3 + Vite + Vue 3 + JS 샘플
        </v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  methods: {
    hello() {
      alert('Vuetify 정상 작동!')
    }
  }
}
</script>

---

7. 실행

npm run dev

 

브라우저 열고 http://localhost:5173 접속해서 버튼 클릭해 보세요!