Vue 3.0/01.Intro 및 설정

[vue 3] 03.Hello Vue

Hello Vue

이번 포스트에서는 앞서 진행한 설정이 잘 되었는지 간단한 소스코드를 만들어보고 잘 동작하는지 살펴보자.

프로젝트 생성

VSCode는 논리적인 Workspace에 물리적인 Folder들을 추가해서 관리한다.

이클립스가 물리적인 Workspace에서 여러 개의 Project를 관리하는 것과는 약간 달리 VSCode는 여러 개의 흩어진 Folder 즉 프로젝트를 하나의 논리적인 Workspace에서 관리할 수 있다.

VSCode를 실행시킨 후 File > Add Folder to Workspace...을 클릭한 후 사용할 폴더를 추가해 준다.

다음은 vueclass라는 Folder를 추가한 결과다. 아직은 workspace가 UNTITLED이다. 참고로 vueclass 하위에는 01_hello라는 서브 폴더가 있다.

이제 File > Save Workspace as 메뉴를 이용해서 Workspace를 저장해 주자.

이제 Workspace의 이름이 확정된 것을 볼 수 있다.

HelloVue.html 작성

모두들 잘 알겠지만 기술 예제의 시작은 HelloWorld이다. 여기서도 HelloVue.html문서를 묻지 마 코딩으로 작성해 보고 잘 동작하는지 점검해 보자.

01_hello 폴더를 오른 클릭 해서 New File 선택 후 helloVue.html을 작성해 보자.

<!DOCTYPE html>
<html lang='en'>

<body>
    <div id='app'>
        {{message}}
    </div>
</body>

</html>

<script src='https://unpkg.com/vue@3'></script>

<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const message = ref("안녕 Vue!")
            return { message };
        },
    }).mount('#app');
</script>

환경 설정 확인을 위한 묻지 마 코딩이기 때문에 별도의 설명은 생략한다.

실행 및 결과 확인

작성한 HelloVue.html을 오른쪽 클릭해서 Open with Live Server 메뉴를 클릭하자.

아래처럼 안녕 Vue! 가 예쁘게 출력되면 성공이다.!!

F12를 클릭해서 개발자 도구를 살펴보면 Vue 탭이 보이고 <Root>를 선택하면 아래의 정보를 볼 수 있다.

일단 여기까지 성공했다면 과정을 위한 설정은 완료되었다.!!

다음 포스트에서는 본격적으로 Vue.js 프로그래밍에 대해 알아보자.

저작자표시 비영리 변경금지

'Vue 3.0 > 01.Intro 및 설정' 카테고리의 다른 글

[vue 3] 04.코드 작성 방법 (0)	2022.06.19
[vue 3] 02.개발환경 구축 (0)	2022.06.17
[Vue 3] 01.Intro (0)	2022.06.16

Contents

새소식