Vue js 설치해보기 (1)

#vuejs #spa

​

**\\글읽기 전에 잠깐!\*\***

**\*\***정보처리기사 필기** 준비중이라면?\*\***

> 정보처리기사 총정리 바로가기

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

​

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

1. 이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

​

vue js란

Vue js란

SPA = sing page aplication을 만드는 도구로 node js의 npm lib중에 하나이다.

​

Vue js장점

양방향 데이터바인딩이 가능하며, 로딩속도가 매우 빠르다. 난이도가 쉬운편이라 다른 도구보다 빠르게 배우고 빠르게 결과물을 내기 좋다.

설치방법 (Vue, Vue cli)

Vue js 설치하기

우선 node js가 없다면 설치하고 오자. node js 설치해준 후 Vue와 Vue cli를 설치해주면 된다.

Vue cli는 Vue js 개발환경 세팅을 도와주는 프로그램이다. Vue cli를 통하여 신속하게 프로젝트를 만들고 프로젝트 관리하기도 편리하다.

npm install -g는 global의 약자로 해당 프로젝트 파일에만 설치하는 것이 아닌, 컴퓨터 전역으로 설치하겠다는 의미이다. 매번 Vue cli를 입력하기에는 매우 귀찮으니 -g를 입력해서 한번만 설치하자.

​

설치확인

위 코드를 입력하면 설치된 Vue version이 나온다.

Vue js 프로젝트 생성

이제 설치를 완료했으니 Vue프로젝트 파일을 만들어보자.

project에는 원하는 프로젝트 이름을 입력하면된다.

기본 세팅을 고를 수 있다.

• Default값으로 Vue 3/Vue2 버전이 존재한다.
• 따로 설정하기 귀찮다면, Default값으로 해도 무관하다.(누르면 바로 설치)
• Vue-basic은 내(사용자)가 설정한 세팅값을 의미한다.
• Manually select features에서 사용자가 임의로 설정을 만들고 저장할 수 있다.

Manually select features로 사용자 설정

Manually select features를 선택하면 함께 사용할 features를 선택해야 한다.(Vue개발을 도와주는 모듈로 보면됨)

• babel,Router,Vuex,Linter/Formatter 선택 후 Enter \*선택은 space bar

​

버전선택

• 최근에 나온 3버전으로 설치한다.
• 2버전은 현업에서 여전히 많이 쓰인다고

기타 설정

• use history mode for router : 라우터 history모드 설정
• Eslint : js문법 Standard config (기본), prettier(확장프로그램)
• Lint on save : js 문법 체크를 코드 저장할때 마다
• 여러 features를 package.json파일 하나로 관리가능
• Save this as a preset for future projects: 지금 설정을 따로 저장하겠는가?

​

좌측과 같이 Project파일이 생성된 것을 볼 수 있다.

​

.eslintrc.js , .prettierrc는 eslint error때문에 따로 만들어 둔건데 원래 없음

​