Vue 2.0란?

vue 공부를 시작하여 vue의 특징을 살펴보고 Vue의 프로젝트 생성 및 파일 구조를 알아 보았습니다.

Vue 특징

• 프론트엔트 개발을 쉽게하기 위한 javascript 프레임워크
• MVVM 패턴의 VM에 해당함
• Single Page Application(SPA)을 구축하는데 이용 가능함
• 코드의 재사용이 쉬움
• 다른 프레임워크보다 배우기 쉬움
• 성능이 빠름

Vue 프로젝트 생성(npm 사용)

vue cli 설치

npm install -g @vue/cli

vue 프로젝트 생성

1. vue create 프로젝트 명
2. Default (Vue 2) 선택
3. 해당 프로젝트 이동 후 npm run serve 명령어로 프로젝트 실행.

기본 구조

public   -> 처음 로드 되는 html 및 favicon.ico       - index.html
      - favicon.ico src assets   -> 기본 이미지 및 css       - logo.png components   -> 공통 components로 구성       - HelloWorld.vue     - App.vue   -> 가장 최상위 components
    - main.js   -> 가장 먼저 실행되는 자바스크립트 파일이며 vue 인스턴스를 생성함

.gitignore   -> 깃 세팅 정보 저장
README.md   -> 깃 올릴때 주의 사항
babel.config.js   -> 자바스크립트의 컴파일러 역활
jsconfig.json   -> 자바스크립트의 루트 디렉토리
package-lock.json
package.json   -> 빌드된 패키지 정보들
vue.config.js   -> vue 세팅 정보

Components - HelloWorld.vue 의 기본 모양

<template>
// 템플릿 안에 html 코드를 작성
</template>

<script>
// 생명 주기, html 코드를 컨트롤 할 스크립트 작성
</script>

<style scoped>
html에 스타일을 직접 적용 할 때 사용
</style>