Nuxt (version 3) Quick Start 해볼까?

이전 시간에는 Nuxt3 이론을 배웠다면, 이번에는 공식 홈페이지를 보며 직접 Nuxt3를 만들어 보겠습니다.

Prerequisites

• Node.js* (latest LTS version)
• Visual Studio Code
• Volar Extension, 공식문서에는 추천하는 링크를 다운받으라고 하였으나, 되지 않아서 두번째꺼를 다운받았어요
  • Take Over Mode (recommended)
  • TypeScript Vue Plugin (Volar)

* Node.js 가 설치되어있다면, node --version으로 v14 or v16인지 확인해주세요~!

* Take Over Mode를 활성화했거나 TypeScript Vue 플러그인(Volar)을 설치한 경우 *.vue 파일에 대한 shim 생성을 비활성화할 수 있습니다. 참고

export default defineNuxtConfig({
  typescript: {
    shim: false
  }
})

New project

terminal을 열거나 자기가 사용하는 editor를 열어 다음의 command를 입력하면서 project를 시작해보겠습니다.

npx nuxi init nuxt-app

다음과 같이 설치안내가 나오면 Enter를 입력하여 진행합니다.

cd nuxt-app

다음의 package manger중 설치하고 싶은걸 선택해서 진행합니다. 

npm install or yarn install or pnpm install --shamefully-hoist

저는 yarn에 익숙하기 때문에 yarn을 이용하겠습니다.

yarn

설치가 완료되었다면, npm run dev 또는 yarn dev 또는 pnpm run dev로 개발 서버 시작합니다.

저는 yarn으로 설치하였으니 yarn dev를 입력하겠습니다.

-o를 붙이면 open의 줄임말 같습니다(추측). 명령어 입력시 바로 화면에 띄워줍니다.

yarn dev -o

개발자라면 Yes

 

위 명령어까지 입력되었다면, <NuxtWelcome /> 컴포넌트가 보여지게 됩니다.

 

 

 

 

출처

- https://v3.nuxtjs.org/getting-started/quick-start