Vue.js란?

• 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크
• 뷰는 CSR을 지원하는 프레임 워크이며, 뷰 라우터를 사용하여 SPA 구축이 용이 CSR & SSR
  
• 뷰 파일은 싱글 파일 컴포넌트(SFC : Single-File Components) 파일로 구성
  • 컴포넌트의 템플릿, 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식
• 단순하고 직관적인 문법을 제공해 개발자가 쉽게 익히고 사용 가능
• 표준 HTML, CSS, 및 JavaScript 위에 구축
• 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공
• 복잡한 사용자 인터페이스도 효율적으로 개발 가능
• 핵심 기능으로는 선언적 렌더링(Declarative Rendering)과 반응성(Reactivity)이 있다.
  • 선언적 렌더링(Declarative Rendering)
    표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성
  • 반응성(Reactivity)
    JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행

Vue.js 요구사항

• Node.js 18.3 이상 설치
  Node.js 설치 링크

Vue의 디렉토리 구조

node_modules\ 		: 프로젝트에 쓰이는 모든 라이브러리가 배치 되는 디렉토리
public\				    : html파일 및 기타파일 보관
src\				      : 소스코드가 배치 되는 디렉토리
.gitignore			  : git 버전 관리 제외 대상 설정 파일
babel.config.js		: Babel 설정을 지정하는 JavaScript 파일
jsconfig.json		  : JavaScript 프로젝트의 설정 파일
package-lock.json	: npm 패키지의 의존성 트리를 정확하게 재현하기 위한 정보를 포함하는 파일
package.json		  : npm 프로젝트의 메타데이터 및 구성 정보를 포함하는 파일
vue.config.js		  : Vue CLI 프로젝트의 설정 파일

Vue 프로젝트 생성

• 터미널(cmd, Windows PowerShell, git bash 등)을 관리자 권한으로 열기
  
• vue 프로젝트를 생성할 위치로 이동
• 아래 커멘드 실행

# vue create 프로젝트명
vue create vue_edu

• vue 3 를 선택해서 vue 프로젝트 생성
• 생성한 vue 프로젝트로 이동
• 아래 커맨드로 dev 모드로 실행

# dev 모드로 실행
npm run serve

• 참조
  Vue.js