FRONT-END

디렉티브 click 

디렉티브 If : count가 4보다클시 div가 나타난다.

  <div v-if="count >4 ">

    4보다큽니다!

  </div>

디렉티브 for : fruits배열안에 들어있는 요소들을 하나씩 fruit에 교체하며 아래에서 {{ fruit }}로 나타낸다.

<ul>

    <li

      v-for="fruit in fruits"

      :key="fruit">

      {{ fruit }}

    </li>

  </ul>

외부 Fruit.vue를 만들어 메인 App.vue로 import하기

eslint 설치

npm i -D eslint eslint-plugin-vue babel-eslint

.eslintrc.js 설정

eslint 문법 커스텀하기

eslint에 의해 틀린문법을 저장할시 자동 수정

vue cli 설치

npm i -g @vue/cli

vue 프로젝트 설치

vue create 프로젝트명

vue 개발도구들 설치

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

main.js 설정

확장자 표시무시하는법

img같은 파일들 불러와서 웹에 나타내기

npm i -D file-loader 설치