hands on vue - App.vue, main.js 제로부터 시작

[목표]

1. html이 아닌 vue-cli를 이용하여 SPA(Single Page Application.. 그냥 페이지라는 뜻)의 차이점을 느껴보자

 

---

main.js가 비어있다.

코드 두줄이있는데 

라인1 : vue 라이브러리에서 createApp이라는 객체를 사용한다는 의미다.

라인3 : 그 객체안에 다양한 것을 집어넣어 mount한다는 의미다.

 

모르면 그냥 

넘어가도됨..

 

---

vue-cli라는 녀석이 main.js를 보고 페이지를 만들어준다.

만든 페이지를 index.html이라는 파일에 mount 시켜준다.

 

이것이 Framework... 짜여진 대로 해야된다..

 

 

---

지금까지 우리는 저기 app 안에 이것 저것 넣었었다.

이제는 vue-cli를 통해 개발할 것이기 때문에 손대면 안된다.

 

그건 main.js에서 다 처리한다.

 

---

src 폴더 안에 App.vue 파일 생성 후 기본 틀만 잡았다.

template이 저번에 포스팅한게 있느데 

template은 부분 조각이다.

 

사용자에게 보여줄 한장의 페이지, 즉 SPA가 index.html이다.

한장의 4절지라고 상상해보자

 

4절지에 색종이 조그맣게 붙여서 보여줄 수 있다. 

그 색종이가 template이다.

 

색종이를 떼었다가 다른 색종이를 붙일 수 있다.

---

아래는 뷰파일 소스, main.js소스 임

<template>
<section>
    <ul>
        <li>
             <h1>
                {{friends[1].id}}
            </h1>
        </li>
    </ul>
</section>
</template>

<script>
    export default{
        data(){
            return{
                friends:[
                    {
                       id: 'manuel',
                       name: 'Manuel Lorenz',
                       phone: '1234 5678 90', 
                       email: 'manuel@localhost.com'
                    },
                    {
                       id: 'tom',
                       name: 'Tom Hoon',
                       phone: '9281 238 2910', 
                       email: 'tomhoon@localhost.com'
                    },
                ],
            }
        },
        methods: {

        },
        computed: {

        }
    }
</script>

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

결과물임

css없이 제로부터 mount하여 출력까지 해봤다.

css없으니까 재미읍다