[Vue3.js] Vue3 시작하기 #1-프로젝트 생성 및 환경구성

📚 Vue2 를 사용하여 개발했던 프로젝트가 종료되어 이번엔 Vue3 에 대해서 알아보려고 한다. 'Vue2 <> Vue3 차이점' 에 대해서는 하나하나 경험해보면서 정리할 예정이다.

1. 사전 준비

Vue 는 node.js 기반으로 되어있기 때문에 node가 설치되어야 한다.

2. Vue cli 설치

Vue cli 최신 버전 글로벌로 설치한다.

• CLI : Command Line Interface의 약자로 명령어를 이용하여 프로젝트를 구성하는 역할을 함.
• 전역으로 설치
• Latest v4.5.13 (21.07.23 기준)

$ npm install -g @vue/cli

정상적으로 설치가 완료되었다면 버전을 확인한다.

$ vue -V
@vue/cli 4.5.13

3. 프로젝트 생성

$ 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 Project Style Guide

Vue 3 공식 스타일 가이드를 참고하여 프로젝트 규칙을 정하면 좋을 것 같다.
https://v3.vuejs.org/style-guide/#simple-expressions-in-templates-strongly-recommended

기타설정

필요한 플러그인이 있다면 설치

4. Inital setting

Vue3 로 Frontend 개발을 위해서 필요한 패키지를 하나씩 설치하면서 프로젝트 구조를 잡아볼 예정이다.

5.1 전체적인 구조 생각하기

다들 Vue3 프로젝트를 어떻게 구성하고 있는지 알아보기 위해서 gitHub에 Vue boilerplate 키워드로 검색해서 보는것도 좋을 것 같다. (그렇지만 나는 다른분들의 포스팅을 참고했다. ^^)

📝 boilerplate 란?
말그대로 보일러를 찍어내는 통 정도라고 생각하면 된다. 즉, 코딩에 적용해 보면 간단한 초기 기능의 반복적이고 자주 쓰이는 코드를 재사용 할 수 있도록 만들어진 형태다.

나는 많은 구조 중에 그동안 참여했던 프로젝트에서 잡았던 구조와 비슷한 vue-enterprise-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/ 디렉토리가 src/의 하위가 아닌 router/의 하위에 있음
  -> views 는 router에 밀접히 연관되어 해당하는 화면 소스코드를 내포한다는 점을 좀더 명확히 할 수 있다.
• layout/ 디렉토리가 별도록 존재
  -> 레이아웃의 중요도가 높아지는 효과!

TODO - 구조

• 하나의 프로젝트에 frontend / backend 모두 관리할 것이기 때문에 디렉토리로 구분해 준다.
• 기본 적인 view component 는 views 디렉토리에 위치시키며 하위 디렉토리는 메뉴 or 서비스 기능 별로 정의한다.
• component 디렉토리는 말그대로 component 화 한 코드만을 작성한다.
• views 디렉토리는 루트에 위치 시킨다.
  -> 좀더 직관적으로 폴더를 관리하기 위해 참고한 boilerplate 구조와 다르게 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/)