(vue3)vue cli 프로젝트 생성 (vuex와 router를 곁들인...)

목표

vue cli를 통해서 vue 프로젝트를 생성해보자 

 

1. node 설치

우선 vue를 설치하기 전에 node를 설치해주자 필자의 node 버전은 16.16.0버전이다 꽤 과거 버전이므로 더 높은 버전을 받도록 하자 *^^*

 

node 설치 법은 해당 글에서 다루지 않는다. 구글에 치면 많이 나오니 참고해서 받기를...다 설치하고 나면 아래와 같이 버전이 나오면 설치가 잘 된것이다.

 

$ node -v
v16.16.0

2. vue cli 설치

npm install -g @vue/cli

위의 명령어를 통해 vue-cli를 설치해준다. 참고로 -g 옵션 주면 해당 프로젝트에서만 사용하는 것이 아니라 전역적으로 사용 가능하다. 한마디로 npm 처럼 어디서든지 쓸 수 있다는 말이다

vue --version

위의 명령어로 버전이 잘 뜨면 설치가 아주 잘 된것이다. 

3. vue 프로젝트 생성

이제 vue 프로젝트를 생성할 폴더를 하나 만들어 주고 각자 쓰는 툴에서 터미널을 열거나 살짝 구린 cmd를 열어서 해당 폴더로 이동해주자. 필자의 경우는 c/code/front 경로에서 진행할거다 저게 무슨 의미인지 모르면 이 글을 닫아주길 바란다. 

 

아무튼 현재 위치가 저 위치라고 가정하고 시작하겠다. 아래 명령어를 입력하면 vue 프로젝트를 생성할 수 있다. 이름은 원하는 이름으로 Go

vue create 프로젝트이름

설마 프로젝트이름 이거를 그대로 쓰는 사람을 없을거라고 믿는다...^^ 

ex) vue create sample-vue  <<<<<<< 이런식으로 치면 된다

 

그럼 이제 뭔가 바뀐다. 바로 아래처럼

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> basic-set ([Vue 3] babel, router, vuex, eslint) 
  basic-noeslint ([Vue 3] babel, router, vuex) 
  dedicated ([Vue 3] babel, router, vuex, eslint) 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

 

해당 메뉴에서 Manually select features 엔터

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle
all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

그럼 위 처럼 나오는데 필자는 다른 것들은 제외하고 아래 항목들만 선택해서 진행할거다. 

1. babel - 이 친구는 뭐 구형 브라우저에서도 최신 js 문법들이 동작하도록 도와주는 친구라고 한다. 이 외에도 뭔가 더 하는게 있을거다.

 

2. router - 라우터란 무엇인가? 쉽게 말하면 화면을 바꿔주는 녀석이다. 참고로 SPA 즉 싱글 페이지 어플리케이션에서는 페이지 이동이라기 보다 뭐랄까 컴포넌를 바꿔준다고 하는게 맞는거 같다. 해당 부분은 뭐라고 표현해야할지 잘 모르겠다...애니웨이 url에 맞게 컴포넌트들을 그려주는 녀석이라고 생각하자

 

3. vuex - 뭐라고 발음해야 할지도 모를 녀석이다. 필자는 뷰엑스라고 부른다. 이 친구는 상태 관리를 해주는 store 즉 저장소다. 이렇게 말하면 당연히 이해 못한다. 쉽게 말해서 페이지 어디서든 접근이 가능한 상태 값들을 가질 수 있는 저장소다.

 

예시로 로그인을 한 유저의 정보를 vuex에 담아놓으면 어느 view에서든 로그인 유저의 정보(상태)를 가져올 수 있다. 이건 나중에 코드로 살펴보자 아무튼 그런 역할을 하는 친구다.

 

4. Linter(eslint) - 필자가 가장 싫어하는 친구다. 알고싶지도 않고 알기도 싫은 친구인데 없으면 힘들다. 프로젝트를 뛰다보면 각 프로젝트별로 코드 컨벤션이라는게 존재한다. 모두가 일관된 코드 방식으로 작성하고 추후 유지보수를 할 때도 용이하게 해주기 위해서 코드 컨벤션이라는걸 정하는데 eslint의 해당 설정을 통해 정할 수 있다.

 

예를 들어 코드 마지막에 세미콜론 빠지면 에러를 발생시키거나 문자열은 " "를 사용해서 쓴다던가 등의 설정이 가능하다. 그 외에도 많은 역할을 하는데 이것 또한 구글링...plz 다음으로 넘어가자

 

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

vue 버전 선택 하라는거다 당연히 3.x 선택하면 된다. 다음

 

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

vue router를 같이 받으면 해당 질문이 뜬다 무슨 의미이냐? router에서 history 모드를 사용할 것이냐고 물어보는데 

 

해당 내용은

https://v3.router.vuejs.org/kr/guide/essentials/history-mode.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6

HTML5 히스토리 모드 | Vue Router

를 참고하자 필자는 Y로 설정한다

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

eslint 설정이다 첫번째걸로 선택 

 

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

첫번째를 선택할건데 무슨 의미인가 하면 파일 저장시 자동으로 코드를 검사한다는 뜻이다. 즉 코드를 마아악 짜고 저장을 하는 순간 eslint가 검사해서 세미콜론 빠지면 에러를 뱉어줄 것이다. 밑에는 사실 까먹었다 ㅎㅎ

 

그러고 뭐가 더 있는데 엔터 막 누르다가 지나쳤다...기억을 더듬어서 말하자면 아마 저 다음이 config 파일을 분리할거냐 pacage.json에서 설정할거냐 인데 필자는 json 안에서 설정한다 

 

그다음 방금 했던 설정들을 프리셋으로 지정할 것인가를 물어볼텐데 프리셋을 지정하면 vue create 하고 난 후에 필자의 선택 항목중에 basic-set 이것처럼 미리 설정된 것들을 저장해놓을 수 있다. 이건 선택사항이다 

 

여기까지 오면 이제 막 설치를 할거다

 

그럼 아마 아래와 같이 폴더 트리가 생길것이다. 

폴더 트리

이제 마지막이다. 생성된 폴더로 들어가서 npm run serve 명령어를 입력해보자

홈 화면

그럼 메인 페이지가 나오면서 위 사진과 같은 화면이 나오면 정상적으로 아주 자아아아아아알 설치가 된 것이다.