vue.js 프로젝트 내부 살펴보기

지난 글에서 vue-cli를 활용하여 Vue.js 기반의 프로젝트를 생성해보았다. 

지난 글 : http://iam-song.tistory.com/45?category=703225

생성된 프로젝트의 구조를 한번 휘리릭 보면

- build : 웹팩으로 빌드하기 위해 필요한 파일 모음 dir

- config : 각 환경 별 환경 변수 선언된 파일 모음 dir

- node_modules : npm i 으로 설치된 외부 라이브러리 dir

- src : 프로젝트 개발을 위한 메인 dir

    - asset : 이미지 등 css 관련 dir

    - components : 각 화면에 대한 component 선언 dir 

    - router : 앱 라우터 선언 dir

    - main.js : Application의 실행을 위한 js 파일

    - App.vue : Application의 루트 Vue 객체 생성 파일

위와 같이 정리해볼 수 있다. 

자동으로 생성되어 있는 App.vue 파일을 통해서 기본적인 Vue 파일의 구조를 파악해볼 수 있다. 

App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App'

}

</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>

*.vue 파일은 특이한게 한 파일 안에 template과 script, style이 같이 선언되어 있다. 

너무 파일의 크기가 커지지거나 하지 않을까 싶었는데,

사실 또 생각해보니 component를 적절하게 나누어 생성하다 보니 

그렇게 길고 긴 파일이 생성될 일이 많지는 않은 것 같다. 

아무튼, 

<template> 태그 안에는 생성할 component의 HTML 템플릿을 선언하고 

<script> 태그 안에는 생성할 vue component의 내용을, 

<style> 태그 안에는 생성될 vue component의 스타일을 정의하면 된다.