VueJS 프로그램 구조

 

개발 환경과 배포 환경이 다르다.

 

src 폴더

components -> HelloWorld.vue 

 

배포환경

개발한것을 컴파일 함. (vue 파일을 HTML 파일로 변경)

 

App.vue에

<template> 태그부분..

<script>

<style> 3가지 태그를 모아놓음. 단일 파일 구성(SFC) 라고 함.

 

App.vue 는 Entry.

개발자는 src 디렉토리만 보면 됨

main.js랑 App.vue 만 남기고 전부 지워라.

<template> 태그 내용지우고.

<script> 부분에 import 부준 지우고, components 부분 모두 지우고

<style> 부분 지우고

 

설정-> auto save 검색해서... afterDelay, 1000으로 설정해라

 

main.js 가 Entry Point다.

파일 하나가 컴포넌트라 생각하면 됨.

 

createApp(App).mount('#app') 의미는...

#app...-> public 디렉토리에 index.html 파일의 <div id="app"></div> 에 마운트 된다는 의미.

main.js 는 손댈일이 거의 없다.

 

==================== App.vue 수정해보자 ==================== 

<template>

  <h1>Hello World</h1>

  <hr/>

  <ul>

    <li>방청소</li>

    <li>코딩 500줄</li>

    <li>5키로 걷고 뛰기</li>

    <li>야식 안하기</li>

  </ul>

</template>

<script>

export default {

  name: 'App',

  components: {  

  }

}

</script>

<style>

 

  h1 {

    color:brown;

  }

</style>

============================================================ 

 

SFC(Sigle File Component)

DRY(Don't Repeat your code)

 

 

============================================================ 

<template>

  <h1>{{title}}</h1>

  <hr/>

  <ul>

    <li>{{todo1}}</li>

    <li>{{todo2}}</li>

    <li>5키로 걷고 뛰기</li>

    <li>야식 안하기</li>

  </ul>

</template>

<script>

export default {

  name: 'App',

  data() {

    return {

      title: '내일 할일',

      todo1: '방청소 하기',

      todo2: 'vue 마스터 하기',

    }

  }

}

</script>

<style>

 

  h1 {

    color:brown;

  }

</style>

============================================================