[Web] 웹 개발 A to Z (3) Vue 프로젝트 생성

Vue프로젝트를 생성해 보자

 

프로젝트>src에서 VSCode를 실행한다.

 

Vue 프로젝트를 생성할 것이다. 먼저 Terminal을 연다.

 

vue -V 로 버전을 확인한다. 기존에 Vue-CLI 가 설치되어 있기 때문에 @vue/cli 4.5.11 이 나온다.

처음 설치를 한다면 먼저 터미널에 npm install -g @vue/cli 를 입력하여 vue cli를 설치해야한다.

참고로 Vue-CLI를 사용하기 위해서는 먼저 node.js가 설치되어 있어야한다.

 

vue create frontend 입력 -> frontend 라는 vue 프로젝트를 생성한다.

 

Manually select features 를 선택한다.

 

처음에 나오는 선택지는 다음과 같다.

 

1. Babel : ES6(ES2015) 이상 버전이나 typescript로 코딩을 한경우 범용적인 ES5버전으로 자동 전환 해줌

2. TypeScript : 앵귤러js에서 표준으로 삼고있는 코딩언어로 javascript에 타입을 강화한 좀 더 진화된 javascript라고 보면됨

3. Progressive Web App Support : 웹앱을 만들고자 한다면 선택

4. Router : Vue에서 화면이동을 구현하기 위한 플러그인

5. Vuex : Vue에서 데이터를 쉽게 공유해서 대규모 Vue 개발을 편리하게 해줌

6. CSS Pre-processors : SASS, LESS같이 화면을 꾸며주는 CSS를 프로그램처럼 작업할 수 있게 해줌

7. Linter/Formatter : js코딩을 할 때 대부분의 사람들이 쉽게 알아 볼 수 있게 표준 가이드를 해줌

8. Unit Testing : just, 모카 등 단위테스트를 자동으로 해 줄수 있는 플러그인

9. E2E Testing : E2E(End-to-End) 테스트로 통합테스트 정도로 생각하면 됨

출처: https://uxgjs.tistory.com/136 [UX 공작소]

 

나는 Babel, Router, Vuex, Linter/Formatter 를 선택했다.

 

 

Vue.js 버전은 2.x를 선택했다. 3.x는 최근에 나와서 그런지 프로그램의 동작에는 문제가 없으나 크롬에서의 vue devtool이 제대로 작동하지 않는 문제가 있다고 한다.

 

라우터 설정 중에 히스토리 모드를 사용할 것이냐고 묻는다. 보통은 기본값인 Y를 선택한다. N 일 경우 hashbang 모드

 

ESlinter를 적용하는데 어느 규칙으로 사용할 것인가를 선택.

 

저장 시 lint 검사만 할 지 자동으로 고치는 것이 가능한 것은 수정까지 할 지 선택.

 

지금까지 선택한 요소들 중 일부는 설정 항목을 남기게 되어 있는데, 이 것을 별도의 파일로 만들어서 작성을 할 것이냐 아니면 기존에 있는 package.json파일에 추가 요소로 넣어서 작성할 것이냐를 선택한다. 아무거나 선택해도 됨.

출처: https://uxgjs.tistory.com/136 [UX 공작소]

 

지금까지의 설정을 기억해 둘거임?

 

프리셋의 이름을 정하자.

 

src 밑에 frontend폴더가 생성되었다!

 

 

cd frontend 후 yarn serve or npm run serve 를 하면 다음과 같이 나온다.

 

이제 웹브라우저를 실행하여 Local 주소를 입력하면 다음과 같이 나올 것이다.

 

추가된 부분을 VSCode에서 Commit & Push 하자.

좌측의 Source Control -> Stage All Changes (+ 버튼 클릭)

 

CommitMessage를 입력 후 Commit (체크 버튼 클릭)

 

...버튼 클릭 후 Push

 

 

 

 

 

Vue 프로젝트를 생성하는것 까지 완료했다.

다음 포스팅은