Vuetify 3 설치 및 적용하는 방법

Vuetify 3 설치 및 적용하는 방법

Vuetify는 Vue.js를 위한 인기 있는 UI 라이브러리로, Material Design 기반의 아름답고 반응형 웹 애플리케이션을 쉽게 만들 수 있도록 도와줍니다. Vuetify 3는 Vue 3과 함께 작동하며, 더 나은 성능과 새로운 기능들을 제공합니다. 아래는 Vuetify 3를 설치하고 프로젝트에 적용하는 방법을 단계별로 정리한 내용입니다.

1. Vuetify 3 설치 준비

1. Node.js 설치 확인
   • Vuetify를 사용하기 위해서는 Node.js가 설치되어 있어야 합니다. 설치가 되어 있지 않다면, Node.js 설치 방법을 참고하여 설치합니다.
2. Vue.js 프로젝트 생성
   • Vuetify를 설치할 Vue.js 프로젝트가 필요합니다. 먼저 Vue CLI를 사용하여 새로운 프로젝트를 생성합니다.

   vue create my-project
   

   • 프로젝트 이름은 원하는 대로 설정할 수 있습니다.

2. Vuetify 3 설치

1. 프로젝트 디렉토리로 이동
   • 생성한 프로젝트 디렉토리로 이동합니다.

   cd my-project
   

    

2. Vuetify 설치
   • 다음 명령어를 입력하여 Vuetify 3를 설치합니다.

   vue add vuetify
   

   • 설치 중에 여러 가지 설정을 선택하라는 메시지가 나타납니다. 원하는 옵션을 선택하면 됩니다. 일반적으로 Default (recommended) 옵션을 선택하는 것이 좋습니다.
3. 설치 완료 확인
   • 설치가 완료되면, Vuetify가 프로젝트에 성공적으로 추가되었는지 확인합니다.

3. Vuetify 3 적용

1. 프로젝트 구조 확인
   • Vuetify 설치 후, src/plugins/vuetify.js 파일이 생성됩니다. 이 파일은 Vuetify의 설정을 포함하고 있습니다.
2. 메인 파일 수정
   • src/main.js 파일을 열어 Vuetify를 애플리케이션에 추가합니다. 기본적으로 Vuetify는 이미 설정되어 있을 것입니다.

   import { createApp } from 'vue';
   import App from './App.vue';
   import vuetify from './plugins/vuetify'; // Vuetify import
   
   createApp(App).use(vuetify).mount('#app');
   

    

3. Vuetify 컴포넌트 사용
   • 이제 Vuetify 컴포넌트를 사용할 수 있습니다. 예를 들어, src/App.vue 파일을 열고 기본 템플릿을 다음과 같이 수정합니다.

   <template>
     <v-app>
       <v-container>
         <v-btn color="primary">Vuetify Button</v-btn>
       </v-container>
     </v-app>
   </template>
   
   <script>
   export default {
     name: 'App',
   };
   </script>
   
   <style>
   /* 스타일 추가 가능 */
   </style>
   

    

4. 서버 실행
   • 아래 명령어로 개발 서버를 실행합니다.

   npm run serve
   

    

5. 브라우저에서 확인
   • 브라우저에서 http://localhost:8080에 접속하여 Vuetify 버튼이 정상적으로 표시되는지 확인합니다.

     

 

4. 추가 정보

• Vuetify 문서: 더 많은 컴포넌트와 사용법은 Vuetify 공식 문서를 참고하세요.
• 테마 및 스타일: Vuetify는 다양한 테마와 스타일 옵션을 제공합니다. 필요에 따라 커스터마이징 가능합니다.

---

이제 Vuetify 3가 성공적으로 설치되고 적용되었습니다! 

 

 

 

2024.08.08 - [마루아라는 개발쟁이/JAVA] - Node.js 다운로드 및 설치 방법

Node.js 다운로드 및 설치 방법