Nuxt.js가 설치되었는지 확인

Nuxt.js가 설치되었는지 확인하려면 다음 단계를 따라 하실 수 있습니다:

1. 프로젝트 디렉토리에서 확인
   Nuxt.js가 설치된 경우 node_modules 폴더 안에 Nuxt 관련 패키지가 포함되어 있습니다.또는 Windows에서는:
2. dir node_modules | findstr nuxt
3. ls node_modules | grep nuxt
4. package.json 파일 확인
   프로젝트 루트 디렉토리에 있는 package.json 파일에서 Nuxt.js가 dependencies 또는 devDependencies에 포함되어 있는지 확인하세요.예를 들어:
5. "dependencies": { "nuxt": "^3.0.0" }
6. cat package.json
7. Nuxt CLI 명령어 확인
   Nuxt CLI가 설치되어 있으면 다음 명령어가 작동합니다:또는
8. npx nuxt --version
9. npx nuxt -v

이 명령어를 실행했을 때 Nuxt 버전이 표시되면 Nuxt.js가 설치된 것입니다.

1. 글로벌 설치 확인
   Nuxt.js가 글로벌로 설치되었는지 확인하려면:

   npm list -g nuxt
   

   또는 Yarn을 사용하는 경우:

   yarn global list | grep nuxt
   

결과가 나오지 않으면 Nuxt가 설치되어 있지 않은 것입니다. Nuxt.js를 설치하려면 아래 명령어를 실행하시면 됩니다:

npm install nuxt

또는

yarn add nuxt

728x90

Nuxt.js를 설치하셨다면, 기본적으로 사용 가능한 예제 소스를 제공하겠습니다. 아래는 Nuxt.js 3 기준의 기본 프로젝트 구조와 샘플 코드를 포함한 간단한 예제입니다.

1. 기본 프로젝트 구조

Nuxt 프로젝트의 기본 폴더 구조는 다음과 같습니다:

my-nuxt-app/
├── pages/
│   └── index.vue
├── components/
│   └── HelloWorld.vue
├── nuxt.config.ts
└── package.json

---

2. 예제 코드

1) pages/index.vue

Nuxt.js에서는 pages 디렉토리 안의 파일이 자동으로 라우팅됩니다.
index.vue는 기본 루트 경로 /에 매핑됩니다.

<template>
  <div>
    <h1>Welcome to My Nuxt App</h1>
    <HelloWorld />
  </div>
</template>

<script setup>
import HelloWorld from "~/components/HelloWorld.vue";
</script>

---

2) components/HelloWorld.vue

컴포넌트는 components 폴더에 생성하며, 필요 시 어디서든 가져다 사용할 수 있습니다.

<template>
  <div>
    <p>Hello, this is a reusable component!</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
p {
  color: #007bff;
  font-weight: bold;
}
</style>

---

3) nuxt.config.ts

Nuxt 설정 파일로, 애플리케이션의 주요 설정을 정의합니다.

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'This is a Nuxt.js example app' },
      ],
    },
  },
});

---

728x90

---

2024.12.12 - [Vue.js 를 배워보자] - Nuxt.js 프로젝트 생성

Nuxt.js 프로젝트 생성

 

 

Nuxt 프로젝트를 설정하면 package.json 파일이 생성됩니다. 이 파일에는 프로젝트의 의존성, 스크립트 및 메타데이터가 포함됩니다. 아래는 기본적인 Nuxt 프로젝트를 위한 package.json 예제입니다:

예제: package.json

{
  "name": "my-nuxt-app",
  "version": "1.0.0",
  "description": "A simple Nuxt.js project example",
  "author": "Your Name <your-email@example.com>",
  "private": true,
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue ."
  },
  "dependencies": {
    "nuxt": "^3.9.0"
  },
  "devDependencies": {
    "eslint": "^8.50.0",
    "eslint-plugin-nuxt": "^1.0.0"
  }
}

---

주요 항목 설명

1. name: 프로젝트의 이름입니다. 원하는 이름으로 변경 가능합니다.
2. version: 프로젝트 버전. 기본값은 1.0.0입니다.
3. scripts:
   • dev: 개발 서버를 실행 (npm run dev).
   • build: 프로덕션 빌드 생성.
   • start: 프로덕션 서버 실행.
   • generate: 정적 사이트 생성.
   • lint: 코드 스타일을 검사하는 ESLint 명령어.
4. dependencies:
   • nuxt: Nuxt의 주요 패키지입니다.
5. devDependencies:
   • eslint: 코드 품질을 검사하는 도구.
   • eslint-plugin-nuxt: Nuxt에 특화된 ESLint 플러그인.

---

Nuxt 프로젝트 생성 후 package.json 확인

Nuxt 프로젝트를 생성하셨다면, 생성된 프로젝트 디렉토리 내에서 package.json 파일을 열어 위와 비슷한 구성을 확인할 수 있을 것입니다.

3. 실행 방법

1. 설치된 Nuxt 앱에서 개발 서버를 실행:

   npm run dev
   

2. 브라우저에서 http://localhost:3000으로 이동하면 위 코드가 작동하는 것을 확인할 수 있습니다.

---

위 예제를 바탕으로 더 자세한 기능을 추가하거나 Nuxt의 기능을 실습하실 수 있습니다. 추가로 궁금한 사항이 있으면 언제든 문의해 주세요! 😊