먼저, 코드를 작성하는 방식을 변경해야한다.
현재 setup은 하나의 JS파일을 사용하고, 이를 단일 HTML 파일에서 불러오고 있다.
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script> <!--app.js불러오고 있다.-->
</head>
<body>
<section id="assignment">
</section>
</body>
</html>//app.js
const app = Vue.createApp({
data() {
return {};
},
methods: {},
});
app.mount("#assignment");
하지만, 이러한 setup은 확장이 어렵다.
더 크고, 더 현실적인 애플리케이션을 구축하기 시작하면 이러한 setup에서는 문제가 발생한다.
따라서 이번 섹션에서는 Vue CLI를 사용하여, 보다 나은 개발설정을 살펴볼 예정.
더 나은 프로젝트 설정을 제공하는 추가 도구를 사용하면, Vue앱을 작성하고 더 큰 규모의 Vue앱을 구축하는데 도움이 된다.
Vue CLI가 무엇인지, 이 추가 도구가 필요한 이유와 setup을 개선해야 하는 이유를 알아보자!
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section7] 77. 더 나은 개발자 경험이 필요한 이유 (0) | 2023.08.17 |
|---|---|
| [Udemy Vue 완벽가이드 Section7] 76. 개발 서버가 필요한 이유 (0) | 2023.08.17 |
| [Udemy Vue 완벽가이드 Section6] 73. 여러 Vue앱과 여러 컴포넌트 (0) | 2023.08.17 |
| [Udemy Vue 완벽가이드 Section6] 72. 복잡한 사용자 인터페이스 구축에 컴포넌트를 사용하는 이유 (0) | 2023.08.17 |
| [Udemy Vue 완벽가이드 Section6] 71. 컴포넌트 소개 (0) | 2023.08.17 |
