Nuxt3 프로젝트 이동 하기 - 2️⃣ Nuxt3 프로젝트 생성 / 폴더 구조

Nuxt3 프로젝트를 이제 생성해보도록 하겠다.

 

📎 프로젝트 생성 필수 조건

 - Node.js - 활성 LTS 릴리스 이용

 - 텍스트 편집기

 - 터미널 (Nuxt 명령어 실행 용)

 

✅현재 nuxt3.15 버전으로 프로젝트를 진행 중

 

 

👩🏻‍💻 Nuxt Project 생성 명령어 

# Nuxt CLI 설치 (글로벌 설치)
npm install -g nux

i # 새로운 Nuxt 프로젝트 생성
nuxi init my-nuxt-app

# 의존성설치
cd my-nuxt-app
npm install

 

nuxi는 Nuxt 공식 CLI툴로 프로젝트 초기화 및 개발 플로우를 지원한다.

nuxi init으로 프로젝트 초기 프로젝트 생성이 가능하다.

 

🗂️ Nuxt 프로젝트 폴더 구조

Nuxt2와 다르게 Nuxt3 첫 프로젝트 생성 시 기본 폴더구조는 제공하지 않는다.

좀 더 유연하게 활용하기 위하 최소한의 설정으로 프로젝트가 세팅이 되기 때문에

기본 디렉토리는 내가 초창기에 추가를 해줘야한다.

 

Nuxt3 주요 폴더 구조 명

필요한 디렉토리는 아래 명령어로 추가가 가능하다.

 

/pages

- 라우트 파일을 자동으로 감지

- 파일 생성을 하면 해당 파일명이 자동으로 라우트로 등록

 

 

/component

- 파일 생성 시 자동 임포트 지원

- 해당 디렉토리에 저장된 컴포넌트는 별도 임포트 없이 템플릿에서 바로 사용 가능

 

 

/layouts

 - 레이아웃 파일을 관리하는 디렉토리

 

 

/assets 

- css, 이미지, 폰트 정적 파일 저장

 

 

/public

- 별도 빌드 과정없이 정적 리소스 제공 하는 폴더 

- nuxt2에서 static 폴더 역할

- / 경로로 접근 가능

 

 

/plugins

- Vue 플러그인, 글로벌 설정 초기화 할때 활용

 

 

/middleware

- 라우튼 접근을 제어하거나 가드 역할을 하는 미들웨어 작성

 

 

 

위 폴더 구조는 필수는 아니며, 내 프로젝트 상황에 따라서 만들면 된다.

아래는 간단하게 폴더 구조 초기 설정을 위한 코드이다.

mkdir -p pages components layouts assets public plugins middleware

 

 

🔖 Nuxt 자동 임포트

Nuxt에서는 특정 폴더 에있는 파일은 직접 import하지 않아도 자동 임포트(Auto Import)를 통해서 접근이 가능하다.

개발자가 직접 import 구문 없이 접근이 가능하기 때문에 코드량이 적어지고 편리해진다.

 

자동 임포트는 기본적으로 Nuxt에서 활성화 되었지만,

특정 폴더 Import를 하게 하거나, 해당 기능을 비활성화 시킬 수 있다.

export default defineNuxtConfig({
  imports: {
    dirs: ['composables', 'stores'], // 특정 폴더만 자동 임포트 허용
  },
});

 

export default defineNuxtConfig({
  components: false, // components 자동 임포트 비활성화
  imports: {
    autoImport: false, // composables, stores 자동 임포트 비활성화
  },
});