Vue CLI

Command Line Interface(명령줄 인터페이스)

• Vue.js 개발을 위한 표준 도구
• Vue.js에서 공식으로 제공하는 CLI
• 개발의 필수는 아니지만 개발의 편리성을 위해 필수처럼 사용
• Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공
• Vue와 관련된 오픈 소스들의 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있음

NPM(Node Package Manager)

Command에서 third party 모듈을 설치하고 관리하는 툴

cmd에다가 설치하기

NPM 명령어

• npm init : 새로운 프로젝트나 패키지를 만들 때 사용(package.json이 생성됨)
• npm install 패키지 : 생성되는 위치에서만 사용 가능한 패키지로 설치
• npm install -g 패키지 : 글로벌 패키지 추가, 모든 프로젝트에서 사용 가능한 패키지로 설치

[Vue 2] babel 선택

Vue Project  구조

node_modules

node.js 환경의 여러 의존성 모듈

public

• index.html : Vue 앱의 뼈대가 되는 파일 / 단일 html 파일
• favicon.html : Vue 아이콘

src/assets

webpack에 의해 빌드된 정적 파일

src/component

하위 컴포넌트들이 위치

src/App.vue

최상위 컴포넌트

src/main/js

• webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point
• 실제 단일 파일에서 DOM과 data를 연결했던 것과 동일한 작업이 이루어지는 곳
• Vue 전역에서 활용할 모듈을 등록할 수 있는 파일

babel.config.js

babel 관련 설정이 작성된 파일

package-json

프로젝트의 종속성 목록과 지원되는 브라우저에 대한 구성 옵션

package-lock.json

• node_moduls에 설치되는 모듈과 관련된 모든 의존성을 설정/관리
• 팀원 및 배포 환경에서 정확히 동일한 종속성을 설치하도록 보장
• 사용할 패키지의 버전을 고정
• 개발 과정 간의 의존성 패키지 충돌 방지

SFC(Single File Component)

• 확장자가 .vue인 파일
• template+script+style=.vue(HTML, CSS, JavaScript 코드를 하나의 파일에서 관리)
• 구문 강조가 가능
• 컴포넌트에서만 CSS의 범위를 제한할 수 있음

SFC-<template>

• 기본 언어 : HTML
• 각 *.vue 파일은 한번에 최대 하나의  <template> 블록을 포함할 수 있음
• 내용은 문자열로 추출되어 컴파일된 Vue컴포넌트의  template 옵션으로 사용
• root element가 하나 필요함

SFC-<script>

• 기본 언어 : JavaScript
• 각 *.vue파일은 한번에 최대 하나의  <script> 블록을 포함할 수 있음
• ES2015(ES6)를 지원하여 import와 export를 사용할 수 있음

SFC-<style>

• 기본 언어 : CSS
• 각 *.vue 파일은 여러 개의 <style> 태그를 지원
• scoped 속성을 이용하여 현재 컴포넌트에서만 사용 가능한 CSS를 지정 가능

HeaderNav.vue
<template>
  <div>
    <h2>헤더입니다.</h2>
  </div>
</template>

<script>
export default {};
</script>

<style></style>
=====================================================================
MainContent.vue
<template>
  <div>
    <h2>메인입니다.</h2>
  </div>
</template>

<script>
export default {};
</script>

<style></style>
=====================================================================
FooterNav.vue
<template>
  <div><h2>푸터입니다.</h2></div>
</template>

<script>
export default {};
</script>

<style></style>
=====================================================================
App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <header-nav></header-nav>
    <main-content></main-content>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import HeaderNav from "./components/HeaderNav.vue";
import MainContent from "./components/MainContent.vue";
import FooterBar from "./components/FooterBar.vue";

export default {
  name: "App",
  components: {
    // HelloWorld
    HeaderNav,
    MainContent,
    FooterBar,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>