Vue CLI

(기존)
HTML파일 내에 JScode로 포함하고 componenet를 생성할때 template속성을 이용
-> 사용하기 불편하고 유지보수도 힘들어요

그래서!
Single File Component를 이용해요
component 1개를 file 1개로 구현

• ~~.vue 형태의 파일
  (구조는 아래와 같다)

<template>
//conponent가 가진 템플릿 속성
//html의 내용이 그대로 나와요
</template>
<script>
  export default{
  //data, methods, props, created, conputed...의 JS객체가 module화
  }
</script>
<style>
//위에 있는 html부분에 대한 css
</style>

단, vue file은 browser가 해석 불가능하므로
'module bundler'를 이용하여 문제를 해결할 수 있어요!
=> html, css, Javascript를 1개의 file로 생성

• 대표적인 module bundler

  webpack(웹팩) 🌟 주로 웹팩을 써요
  browserify(브라우져리파이)

위에것도 복잡해서 Vue CLI를 써요(node.js의 moduler로 제공)
//node.js를 이용해서 Vue CLI를 설치해보자
1. node.js를 설치
2. npm(node package manager)을 이용해 Vue CLI설치
↪️node.js의 모듈을 관리하는 모듈
npm install vue-cli --location=global(프롬포트에 설치해요)
3. 프롬포트에 vue 설치 확인
4. Vue CLI는 project생성 시 6개의 옵션이 있어요

프로젝트 생성 -> vue init webpack-simple
npm 설치 -> npm install
서버실행 -> npm run dev

❓간단한 todo app을 만들어보자

@ 추가로 반응형으로 삭제하는것을 구현해보자