0. Vue - 시작 준비

0. 시작에 앞서

• webpack 포스팅에서 사용된 프로젝트가 본 포스팅에서 사용될 예정입니다. 
• webpack 포스팅을 먼저 읽고난 후, 본 포스팅을 따라하는 것을 권장합니다.  

---

1. Vue 는 무엇인가? 

• Vue 는 프론트 개발을 더욱 효율적이고 쉽게 할 수 있도록 돕는 프레임워크다. 
• HTML, CSS, JS를 Vue라는 구조를 통해 더욱 간편하게 작성할 수 있게 된다.
• Vue의 대표적인 특성은 SPA(Single Page Application)를 쉽게 만들수 있도록 해준다는 것이다.
• 하나씩 배워보면서 Vue에 대해서 알아보자.  

---

2. Vue 설치하기 

• 터미널 입력: npm i -g @vue/cli

cli.vuejs.org/guide/installation.html

Installation | Vue CLI

---

3. 프로젝트 생성하기 

• Vue CLI 설치를 완료한 후, VSCode 또는 사용하는 IDE를 실행합니다. 
• 터미널 입력: vue create 프로젝트이름
  
• 최신 버전인 Vue 3를 사용할 예정이므로, 두번째 옵션을 선택합니다. 

Vue 프로젝트 생성 명령어

Vue 프로젝트 preset 옵션 선택

---

4. package.json 

• 제가 작성한 webpack 포스팅을 읽어보셨거나, 공부를 해보신 분들에게는 익숙한 package.json 파일입니다. 
• 터미널의 명령을 통해 생성한 vue프로젝트를 open하면, package.json 파일이 있습니다. 

 

a) 기본 명령어

• serve: 개발 서버를 실행할 때 쓰는 명령어
• build: 배포용 파일을 생성할 때 쓰는 명령어 
• lint: 코드 작성 규칙을 확인할 때 쓰는 명령어

 

b) lint를 설정하는 방법

• package.json을 쭉 읽어보면 eslintConfig 라는 속성값이 있다. 
• webpack 에서 했던 것 처럼, rules 부분에 원하는 규칙을 설정할 수 있다. 

 

c) 지원할 브라우저 설정

• 해당 Vue 프로젝트가 지원할 브라우저의 종류와 버전정보를 설정할 수 있다.