영상 참고 : 1시간에 vue.js 배우기

프론트 엔드 프레임워크 대표적인 3가지가 존재합니다.
React.js vs Vue.js vs Angular.js

그 중 Vue.js를 다뤄보려고 합니다.

웹 프론트엔드 프레임워크?

컴포넌트 기반의 SPA를 구축 할 수 있게 해주는 프레임 워크입니다.

• 컴포넌트(Component)

  • 웹을 구성하는 탭, 버튼 등 다양한 UI 요소
  • 재사용 가능하도록 구조화 한 것

• SPA(Single Page Application)

  • 단일 페이지 어플리케이션
  • 하나의 페이지 안에서 필요한 영역이 도달 되는 형태
  • 빠른 페이지 변환
  • 적은 트래픽 양

하지만, 단점은 첫 로딩 시 모든 파일들을 읽기 때문에 큰 프로젝트일 수록 느려진다.

작업환경

작업환경으로는 VScode를 이용하였고 Vue CLI 를 이용하였습니다.

• CLI(Command line Interface)

  • 명령 줄 인터페이스
  • 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻합니다.

프로젝트 생성

1. 먼저 vue/cli를 커맨드라인에 적어 다운받아줍니다.

npm install -g @vue/cli

2. 생성 후, 프로젝트는 다음의 명령어로 생성할 수 있습니다.

vue create '폴더 명'

Manually

Defalut로 생성하면, 프로젝트 생성이 시작됩니다. (오래걸림)

구성( 'test2' 프로젝트)

• 프로젝트 구조
  
  

• 프로젝트 생성시, 해당 경로로 가서 npm run serve 명령어로 구동시킬 수 있습니다.
  
  

• 구동이 완료된 모습이며 Local 링크로 접속하면 다음의 페이지가 나타납니다.