📚 Vue2 를 사용하여 개발했던 프로젝트가 종료되어 이번엔 Vue3 에 대해서 알아보려고 한다. 'Vue2 <> Vue3 차이점' 에 대해서는 하나하나 경험해보면서 정리할 예정이다.
Vue 는 node.js 기반으로 되어있기 때문에 node가 설치되어야 한다.
Vue cli 최신 버전 글로벌로 설치한다.
$ npm install -g @vue/cli
정상적으로 설치가 완료되었다면 버전을 확인한다.
$ vue -V
@vue/cli 4.5.13
$ vue create {project명}
cli 를 통해 생성시 Vue 버전을 선택할 수 있다.
'Vue3' 선택!!
프로젝트 생성이 완료되었다. 🎉🎉
프로젝트를 생성하고 나면 기본적인 폴더 구조는 아래와 같이 구성된다.
├─ README.md
├─ index.html
├─ webpack.config.js
├─ package.json
└─ src
├─ main.js
├─ App.vue
└─ assets
└─ logo.png
Vue 3 공식 스타일 가이드를 참고하여 프로젝트 규칙을 정하면 좋을 것 같다.
https://v3.vuejs.org/style-guide/#simple-expressions-in-templates-strongly-recommended
Vue3 로 Frontend 개발을 위해서 필요한 패키지를 하나씩 설치하면서 프로젝트 구조를 잡아볼 예정이다.
다들 Vue3 프로젝트를 어떻게 구성하고 있는지 알아보기 위해서 gitHub에 Vue
boilerplate
키워드로 검색해서 보는것도 좋을 것 같다. (그렇지만 나는 다른분들의 포스팅을 참고했다. ^^)
📝 boilerplate 란?
말그대로 보일러를 찍어내는 통 정도라고 생각하면 된다. 즉, 코딩에 적용해 보면 간단한 초기 기능의 반복적이고 자주 쓰이는 코드를 재사용 할 수 있도록 만들어진 형태다.
나는 많은 구조 중에 그동안 참여했던 프로젝트에서 잡았던 구조와 비슷한 vue-enterprise-boilerplate
를 참고하여 만들어 보려고 한다.
⭐ Star 7.1k
⚡ Link gitHub 가기
├─ docs
├─ generators
├─ jest.config.js
├─ package.json
├─ package.json.md
├─ public
├─ src
| ├─ App.vue
| ├─ app.config.json
| ├─ app.vue
| ├─ assets
| | └─ ...
| ├─ components
| | ├─ _base-button.vue
| | ├─ _base-icon.vue
| | ├─ _base-input-text.vue
| | ├─ _base-link.vue
| | ├─ _globals.js
| | ├─ nav-bar-routes.vue # nav-bar.vue 가 사용함
| | └─ nav-bar.vue
| ├─ design
| | └─ ...
| ├─ main.js
| ├─ router
| | ├─ index.js
| | ├─ routes.js
| | ├─ layouts
| | | └─ main.vue
| | ├─ views
| | | └─ main.vue
| ├─ state
| | └─ ...
| ├─ utils
| | └─ ...
| └─ ...
├─ test
└─ vue.config.js
views
디렉토리에 위치시키며 하위 디렉토리는 메뉴 or 서비스 기능 별로 정의한다.component
디렉토리는 말그대로 component 화 한 코드만을 작성한다.views
디렉토리는 루트에 위치 시킨다.router
와 분리 시킬 예정이다.Vue.js Component
Vue.js Component
은 HTML Element를 확장하고 재사용 가능한 형태로 구현하는 것을 말한다. Vue.js 에서 사용된 모든 컴포넌트는 하나하나가 Vue.js의 인스턴스이기도 하다. 컴포넌트의 생성 과정은 단순히 등록 -> 사용 패턴으로만 이루어 진다.
✅ Vue3 변경된 문법 최대한 사용
✅ TypeScript 도입
✅ router 정의
✅ Axios 를 통한 공통 API 호출 인터페이스 작성
vue-router
: Vue.js 공식 라우터Axios
: 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리Vuex
: Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 (https://vuex.vuejs.org/kr/)
대박쓰.. 정리 잘보고 가요, 감사합니다