Vue3 Nuxt 시작하기

반응형

Vue 어플리케이션을 쉽게 생성하게 도와주는 프레임워크 Nuxt js

 

Nuxt 공식사이트

The Intuitive Vue Framework

---

설치 방법

• npx

npx create-nuxt-app <project-name>

• yarn

yarn create nuxt-app <project-name>

 

 

• npm

npm init nuxt-app <project-name>

 

명령어 실행후 나오는 체크리스트

✨  Generating Nuxt.js project in hello

? Project name: (hello) 엔터

? Programming language: (Use arrow keys) : JavaScript 
> JavaScript
  TypeScript
  
  ? Package manager: 
  Yarn
> Npm

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios - Promise based HTTP client
 ( ) Progressive Web App (PWA)
 ( ) Content - Git-based headless CMS
 
 ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ( ) ESLint
>( ) Prettier <--ESLint 짜증
 ( ) Lint staged files
 ( ) StyleLint
 ( ) Commitlint
 
 ? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO
  Nightwatch
  
  ? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App
  
  ? Deployment target: (Use arrow keys)  
> Server (Node.js hosting)
  Static (Static/Jamstack hosting)     
  
  ? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript) 
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

? What is your GitHub username? Username

? Version control system: (Use arrow keys)
> Git
  None

---

 

 

Nuxt.js 실행

 

 

• yarn

$ yarn dev

• npm

$ npm run dev

이외의 명령어

dev	개발 서버를 Hot-reloading 상태로 localhost:3000으로 실행된다. 추가로 실행되는 서버는 3001,3002....
build	Webpack을 통해 애플리케이션을 빌드한다.
start	프로덕션(nuxt 배포)모드로 서버를 시작한다.(build 실행 후 진행된다.)
generate	애플리케이션을 빌드하고 모든 라우트를 HTML 파일로 생성한다.(정적 호스팅)

---

디렉토리 구조

📦 Project
├ 📁 assets       
├ 📁 components   
├ 📁 node_modules 
├ 📁 pages        
├ 📁 public      
├ 📄 .gitignore  
├ 📄 .prettierrc.json 
├ 📄 app.vue
├ 📄 nuxt.config.ts
├ 📄 package.json
├ 📄 README.md
└ 📄 tsconfig.json

 

✨assets 폴더
사진이나 영상, 음성 등의 자산을 저장하는 폴더입니다. 

✨components 폴더
Vue로 작성된 컴포넌트를 저장하는 폴더입니다.

✨node_modules
사용되는 패키지가 저장되는 폴더입니다. 패키지를 설치할 때 자동으로 생성되며, 직접 관리하지 않아도 됩니다.

✨pages 폴더

페이지 별 Vue 컴포넌트를 저장하는 폴더입니다.

✨public 폴더
서버 최상위에 저장할 파일을 저장하는 폴더입니다. 

 

✨.gitignore 파일
깃으로 커밋을 할 때 포함시키지 않을 파일이나 폴더를 지정하는 파일입니다. Nuxt 프로젝트를 생성하면 기본 설정이 되어 있습니다.

✨.prettierrc.json 파일

코드를 형식을 맞출 때 사용되는 규칙을 지정하는 파일입니다. 

 

✨app.vue 파일

프로젝트의 시작점이자 모든 페이지의 부모 컴포넌트인 파일입니다. 이 컴포넌트는 페이지가 변경되도 사라지거나 다시 렌더링되지 않습니다. 항상 유지되야 하는 기능을 정의할 때 사용됩니다.

✨nuxt.config.ts 파일
Nuxt 프로젝트를 사용할 때 필요한 설정을 지정하는 파일입니다. 

✨package.json 파일
프로젝트에서 사용하는 패키지와 기본 정보를 저장하는 파일입니다. 패키지를 설치할 때는 이 파일을 기준으로 설치됩니다. 

✨tsconfig.json 파일
TypeScript를 사용할 때 필요한 설정을 지정하는 파일입니다. 보통 직접 관리하지 않아도 됩니다. Nuxt에서는 자동 import 기능을 위해 사용하기도 합니다.

-Blro님께서 정리해주신 내용