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로 생성한 프로젝트 경로로 진입한다.
아래 명령어를 입력하여 설치한다.
1 | npm install -g @vue/cli | cs |
위와 같이 설치가 완료되면
아래 명령어를 입력한다.
1 | vue create client | cs |
위와 같이 명령어를 치면 선택할수 있는 항목이 주어진다.
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를 실습하고 테스트 해보겠다.