Nuxt.js 3 프로젝트 생성
1. Nuxt.js 3 설치
먼저, Nuxt.js 3를 설치해야 합니다. 다음 명령어를 사용하여 Nuxt.js 3 프로젝트를 생성합니다:
npx create-nuxt-app my-nuxt-app
위 명령어를 실행하면 프로젝트 설정을 선택할 수 있는 몇 가지 옵션이 나타납니다. 필요한 옵션을 선택한 후에는 프로젝트 폴더로 이동합니다.
cd my-nuxt-app
2. 페이지 및 컴포넌트 생성
Nuxt.js 3에서는 pages 폴더 안에 Vue 파일을 생성하여 페이지를 만들 수 있습니다. 예를 들어, pages/index.vue 파일을 생성하여 홈 페이지를 만들 수 있습니다.
<template> <div> <h1>Welcome to My Nuxt.js App!</h1> </div> </template>
또한, components 폴더를 생성하여 재사용 가능한 컴포넌트를 만들 수 있습니다.
3. 라우팅 설정
Nuxt.js는 페이지 간의 라우팅을 자동으로 처리합니다. 추가적인 라우팅 설정이 필요하지 않습니다. 만약 사용자가 /about URL로 접속하고 싶다면, pages 폴더에 about.vue 파일을 생성하면 됩니다.
4. 데이터 로딩
Nuxt.js에서는 페이지를 렌더링하기 전에 데이터를 미리 불러올 수 있는 asyncData 메소드를 제공합니다.
<template> <div> <h1>{{ pageTitle }}</h1> </div> </template> <script> export default { async asyncData({ params }) { const pageTitle = await fetchDataFromAPI(params.id); return { pageTitle }; } }; </script>
5. 스타일링
Nuxt.js에서는 CSS를 전역 또는 컴포넌트 단위로 스타일링할 수 있습니다. 컴포넌트 스타일은 각 Vue 파일에 <style> 태그를 사용하여 정의할 수 있습니다.
<style scoped> h1 { color: blue; } </style>
6. 애플리케이션 실행
모든 작업을 마쳤다면, 다음 명령어로 개발 서버를 실행할 수 있습니다:
npm run dev
이제 브라우저에서 http://localhost:3000으로 접속하여 개발 중인 Nuxt.js 애플리케이션을 확인할 수 있습니다.
이것은 Nuxt.js 3를 사용하여 간단한 Vue.js 웹 애플리케이션을 개발하는 간단한 강좌였습니다. Nuxt.js의 공식 문서와 예제를 더 참고하여 깊이 있는 학습을 진행할 수 있습니다.