Vue의 개념과 시작하기

■ Vue : 사용자 인터페이스를 구축하기 위한 JavaScript Framework

1) SFC (Single File Components) : 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방식으로 확장자 명이 vue인 파일을 SFC라고 한다.

2) SFC 구조 : <template /> <script /> <style />

 

 

■ Vue 시작하기

1) NodeJS를 설치한다.

 - node.js? JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임

 - NodeJS를 설치해야 npm을 사용할 수 있다.

2) npm?

 - Node Package Modules로 node.js 기반의 모듈을 모아둔 집합 저장소로 개발자들이 Node.js 기반의 JavaScript로 개발된 오픈 소스를 모듈로 올려 놓는다. 따라서, 개발에 필요한 jQuery, Webpack등의 모듈을 npm 명령어를 통해 쉽게 다운받을 수 있다.

3) npm 명령어

 - npm i -g @vue/cli : 뷰 설치

 - vue --version : 뷰 버전 확인

 - vue create 프로젝트명 : 뷰 프로젝트 생성

 - npm run serve : 프로젝트 실행

 - npm run build : 프로젝트 빌드

 - npm i -g serve : 웹서버 설치 명령어

 - serve -s dist : 웹서버에서 빌드한 파일 실행

 

● 배포 전 테스트 방법

npm run build : 빌드 실행 -> dist 폴더 생성.

npm i -g serve : 웹서버 설치

serve -s dist : 웹서버에서 빌드한 파일 실행