Vue3 Sample Project 생성

 

vue2가 23년 12월 31일 EOL 됨에 따라 vue3 공부를 하기 위해 샘플 프로젝트를 만들어 봤다.

깃헙에 vue3-boilerplate로 검색하면 더 많은 정보를 얻을 수 있다.

내가 참고로 했던 프로젝트는 https://github.com/Jamie-Yang/vue3-boilerplate 이다. 

 

boilerplate(보일러 플레이트)란?
최소한의 변경으로 여러 곳에서 재사용, 반복적으로 비슷한 형태를 띠는 코드를 말한다.

 

version

vue 3.3.4

node 18

npm 8.19.3

axios 0.21.1

vuex 3.3.4

vue-router 4.0.3

@vue/cli-service 5.0.6

bootstrap 4.6.2

 

디렉터리 구조

├─ public
│  └─ favicon.ico
└─ src
   ├─ App.vue
   ├─ assets
   │  ├─ bootstrap-logo.svg
   │  ├─ css
   │  └─ fonts
   ├─ common
   │  └─ js
   ├─ components
   │  ├─ TheWelcome.vue
   │  ├─ icons
   │  └─ layout
   ├─ config
   │  ├─ router
   │  │  └─ router.js
   │  └─ store
   │     └─ index.js
   ├─ main.js
   ├─ plugin
   ├─ views
   │  ├─ layout
   │  │  └─ main
   │  │     ├─ TheFooter.vue
   │  │     └─ TheHeader.vue
   │  └─ page
   │     ├─ SamplePage1.vue
   │     ├─ SamplePage2.vue
   │     └─ sonar
   │        └─ Sonar.vue
   └─ vue.config.js

 

github URL

https://github.com/seongit/vue3-sample-project/tree/main

 

 

프로젝트 화면

설명

- Vuex Setting User 버튼을 클릭하면 미리 선언된 데이터가 Vuex store에 담긴다.

- Vuex Clear User 버튼을 클릭하면 store가 초기화 된다.

- Sonar Axios Test 탭의 경우 Axios 연동 테스트를 위해 만든 탭이다. API 서버도 연동하면 화면이 보인다.

---

샘플 프로젝트 만들어보면서 vue2와 vue3의 차이점에 대해 알 수 있었다. 이것저것 바뀌어서 아직 적응이 안 되지만, 올 하반기는 vue3와 지지고 볶으면서 친해질 예정이다.