[Vue] Vue 개발환경 세팅

1. Vue.js를 사용하는 이유

 

Vue의 특징이자 장점을 살펴보자면

 

1. 접근성이 좋다.
2. 뛰어난 공식 라이브러리와 API 제공
3. 최적화된 렌더링 시스템 -> 개발자가 직접 최적화 수행 X
4. 성능이 좋다.
5. 협업 커뮤니티

등이 있으며, 이 외에도 많겠지만 더 자세한 정보들은 Vue 공식 사이트에서도 확인할 수 있다.

 

 

-Vue 공식 사이트 참고

https://ko.vuejs.org/

Vue.js - The Progressive JavaScript Framework | Vue.js

 

 

 

 

---

 

 

 

 

2. 개발환경 세팅

2.1. nodejs 설치

Vue.js는 자바스크립트 언어를 기반으로 하고 있기 때문에, 이를 구동시키기 위해서는 Runtime 환경이 제공되는 node의 도움을 받아야 한다.

 

 

▼▼▼ 여기에서 다운받을 수 있는데, 

 

https://nodejs.org/ko/

Node.js

 

 

 

 

 

이렇게 두 버전 중 최신 버전보다는 LTS 버전을 설치하는 것이 더 좋다.

 

(최신 버전은 오류가 생기거나 그런 현상이 발생할 가능성이 조금 더 높다고 알고 있다.)

 

 

 

 

 

 

2.2 VS code 설치 및 Vue 설치

 

대부분 이미 깔려있을 것이라고 생각한다.

 

▼▼▼

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

 

설치한 뒤, 새 터미널을 열고 npm install 명령어를 통해 직접 설치가 가능하다.

 

 

 

 

최신 안정화 버전으로 설치를 하는 명령어는

     npm install vue   

 

 

Vue는 CLI(Command Line Interface) 환경도 제공하고 있으며, 프로젝트를 빠르게 생성해주는 라이브러리이다.

 

해당 환경을 설치하는 명령어는

    npm install @vue/cli   

이다.

 

 

 

 

 

2.3. Vue 프로젝트 생성

 

VS Code의 터미널에서 아래 화면과 같이 vue create [ 프로젝트명 ] 명령어 작성을 통해 쉽게 프로젝트 환경을 생성할 수 있다.

 

 

 

 

 

이런식으로 파일들이 생성되며, App.vue가 메인 페이지가 된다.

 

 

 

App.vue 기본 코드

 

 

 

여기에서 복잡하게 볼 것 없이,

 

< template > 내부에는 HTML
< script > 내부에는 JS
< style > 내부에는 CSS

 

 

 

이렇게 생각하고 작성하면 된다.