SFC 프로젝트 구성

Select

Nov 24, 2023

설치한 Vue 가져오기

이제 import * as Vue from ‘vue’로 뷰를 로컬에서 가져와서 쓸 수 있다!

*를 사용해야 하는 이유

vue의 index.js에서는 Node.js와 같이 ESM 방식이 아닌 commonjs 방식으로 모듈을 가져오고 내보내기 때문
즉, default export 가 없으므로 일단 다 가져와서 alias를 사용한다

Vue.createApp처럼 가져오는 sr모듈이 정해져 있다면 import { createApp } from ‘vue’를 사용한다

지금처럼 경로(/) 표시가 없는 곳에서 가져온다면, node_modules에서 패키지를 가져오는 것이다

SFC(Single File Component) 생성하기

Vue.createApp(App)에서 App컴포넌트를 전역 객체가 아닌 파일을 만들어서 넣어줄 수 있다


<template>
    <h1>{{ msg }}</h1>
</template>

<script>
    export default {
        data() {
            return {
                msg: 'Hello!'
            }
        }
    } 
</script>

App.vue

volar 확장 프로그램을 설치하면, vscode에서 template 태그 안에 있는 코드를 html로 해석한다


import * as Vue from 'vue'
import App from './App.vue'

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

main.js


<head>
	..
	<script type="module" src="./main.js" /> <!-- parcel 방식, type=module로 전역을 더럽히지 않음-->
</head>
<body>
	<div id="app" />
</body>

만든 SFC, 즉 vue 파일은 브라우저가 읽을 수 있게 js코드로 변환되어야 한다 ⇒ 번들러 사용

보통 html에 script는 head에 추가하는 것을 추천한다

⇒ defer 옵션을 통해서 html이 끝날 때까지 script 실행을 미뤄서, body에 있는 태그를 쓸 수 있게한다