Vue js와 Node js 사용해보기 - 핵심 1

vue js와 node js를 활용하여 vue js의 핵심 개념을 정리해 보려고 한다.

1. nodejs를 설치

https://nodejs.org/ko/download/

2. node js 프로젝트 생성

node js 프로젝트 폴더 생성 한다.

본인은 vueJs_nodeJs 라는 폴더로 생성하였다.

cmd로 생성한 프로젝트 경로로 진입한다.

아래 명령어를 입력하여 설치한다.

npm install -g @vue/cli

위와 같이 설치가 완료되면 

아래 명령어를 입력한다.

vue create client

위와 같이 명령어를 치면 선택할수 있는 항목이 주어진다.

Vue 버전을 선택할수도 있고 직접 커스텀하게 설정할 수 도 있다.

Manually select features 선택한다.

스페이스를 눌러 Babel, Router, Linter / Formatter 를 선택하고 엔터를 친다.

Babel 자바스크립트 컴파일러 설치해주고

Router 라우팅, linter는 코딩스타일 문법체크 정도로 생각할 수 있다.

여기서 취향대로 빼거나 추가할 수 있다.

라우터에 대한 히스토리 모드는 Y를 입력후 엔터를 친다.

히스토리 모드를 N으로 입력한다면 경로에 /#/이 붙는 현상이 발생한다.

Lint는 선택사항이라 아무거나 해도 된다.

ESLint + Airbnb config 설정을 선택한다.

Lint에 대한 설정 2개를 모두 선택한다.

config에 관한 설정을 in package.json 에 두겠다는 것이다.

다음 프로젝트에 이 설정 저장 N으로 설정한다.

설치가 완료되면 다음과 같이 뜨게 된다.

cd client를 하고 npm run serve를 한다.

vue js기반의 node js서버가 띄워지게 되었다.

해당 서버가 잘 띄워 졌는지 확인해보자.

멋지게 뜬것을 확인 할 수 있었다.

이제 코드를 봐야하므로 visual studio code를 실행하여 프로젝트 구조를 살펴본다.

만약 eslint를 설정을 해제하고 싶다면 package.json 위치와 같은 경로에 

.eslintignore 파일을 생성 후 해제하고 싶은 소스 경로를 명시해준다.

이제 이 설정을 가지고 vuejs를 실습하고 테스트 해보겠다.

2편 ( https://shlee0882.tistory.com/283?category=797808 )