이 기사 개요

NUXTJS에서 프로젝트 작성 절차를 알려드립니다!

이 기사의 목표

NUXTJS 프로젝트를 만들고 localhost로 시작할 수 있습니다.

NUXTJS 정보

프로젝트 작성 절차를 안내하기 전에 먼저 NUXTJS에 대해 간략하게 설명합니다.

NUXTJS는 웹 애플리케이션 개발을 위한 프레임워크입니다.
Vue.js를 기반으로합니다.
「Vue.js」+「Web 어플리케이션 개발에 필요한 기능」이 정리된 프레임워크라고 하는 인상입니다.
자세한 내용은 아래 공식 사이트를 참조하십시오.

NUXTJS: htps : // 그럼. 없는 xtjs. rg/

Vue.js: htps // jp. 아 js. rg / 어서 x. HTML

작성 절차

1. 모든 디렉토리에서 CUI 시작

이번은 sample 디렉토리로 합니다.

2. 명령 실행

아래 명령을 실행하십시오.npx create-nuxt-app <project-name>

<project-name> 는 임의의 이름으로 OK입니다 (이번은 nuxt_sample 라고 합니다).

npx란: htps //w w. 음 pmjs. 코 m / 파 c 카게 / n px

3. 프로젝트 구성 설정

대화형으로 프로젝트 구성을 설정합니다.
아래에 기재하는 선택은 일례이므로, 상황에 맞추어 적절히 선택해 주세요.

① 작성할 프로젝트명을 설정

(nuxt_sample)의 이름으로 문제가 없으면, 그대로 엔터로 다음.

(nuxt_sample)은 위의 2단계에서 설정한 것입니다.

> npx create-nuxt-app nuxt_sample
create-nuxt-app v3.6.2
✨  Generating Nuxt.js project in nuxt_sample
? Project name (nuxt_sample)

② 이용할 언어를 선택

이번에는 TypeScript를 선택합니다.

? Programming language: (Use arrow keys)
> JavaScript
  TypeScript

③ 이용할 패키지 매니저 선택

이번에는 Npm을 선택합니다.

? Package manager: (Use arrow keys)
> Yarn
  Npm

④ 이용할 UI 프레임워크를 선택

이번에는 Bootstrap Vue를 선택합니다.

나중에 변경할 수 있습니다.

? UI framework: (Use arrow keys)
> None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
  Oruga

⑤ 사용할 모듈을 선택

이번에는 HTTP 요청에 대해 Axios를 선택합니다.

나중에 변경할 수 있습니다.

? 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

⑥ 이용하는 정적 해석 툴을 선택

이번에는 ESLint와 Prettier를 선택합니다.

나중에 변경할 수 있습니다.

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint

⑦ 유닛 테스트 프레임워크 선택

이번에는 Jest를 선택합니다.

나중에 변경할 수 있습니다.

? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO
  Nightwatch

⑧ 화면 그리기 방법 선택

이번에는 Single Page App (SPA)을 선택합니다.

? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

⑨ 배포 대상 선택

이번에는 Server를 선택합니다.

? 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)

⑪ CI 툴 선택

이번에는 아무것도 선택하지 않습니다.

GitHub Actions를 선택한 경우 GitHub 사용자 이름을 설정해야 합니다.

? Continuous integration: (Use arrow keys)
> None
  GitHub Actions (GitHub only) 

⑫ 버전 관리 시스템 선택

이번에는 Git 선택합니다.

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

⑬ 대기!

설정이 완료되면 각 패키지의 설치가 시작되므로 대기합니다.

설치가 완료되면 바로 아래에 디렉토리가 생성됩니다.

> ls

    ディレクトリ: sample


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2021/04/24     17:51                nuxt_sample

nuxt_sample 는 이와 같은 구성입니다.

> ls

    ディレクトリ: sample\nuxt_sample


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2021/04/24     17:50                assets
d-----       2021/04/24     17:50                components
d-----       2021/04/24     17:50                layouts
d-----       2021/04/24     17:50                middleware
d-----       2021/04/24     17:51                node_modules
d-----       2021/04/24     17:50                pages
d-----       2021/04/24     17:50                plugins
d-----       2021/04/24     17:50                static
d-----       2021/04/24     17:50                store
d-----       2021/04/24     17:50                test
-a----       2021/04/24     17:50            212 .babelrc
-a----       2021/04/24     17:50            207 .editorconfig
-a----       2021/04/24     17:51            314 .eslintrc.js
-a----       2021/04/24     17:50           1253 .gitignore
-a----       2021/04/24     17:50             43 .prettierrc
-a----       2021/04/24     17:51            438 jest.config.js
-a----       2021/04/24     17:51           1277 nuxt.config.js
-a----       2021/04/24     17:51         637400 package-lock.json
-a----       2021/04/24     17:51           1127 package.json
-a----       2021/04/24     17:50            349 README.md
-a----       2021/04/24     17:50            604 tsconfig.json

4. 동작 확인

nuxt_sample 아래에서 npm run dev를 실행합니다.
http://localhost:3000/ 에 접속해, 아래의 화면이 나오면 OK입니다!


【참고】
htps : // 그럼. 없는 xtjs. 오 rg / 구이데 / 인 s 타치온 /