Nuxt 설치하기

출처 : https://ko.nuxtjs.org/guides/get-started/installation

Installation

 

매번 프로젝트를 만들 때 마다 햇갈려서 정리 합니다. 

 

기본적으로 노드는 설치 되어 있어야 합니다. 

 

설치는 아래로 이동하시면 됩니다. 

 

node - at least v8.9.0

Download | Node.js

 

터미널 혹은 cmd를 사용하실 수 있어야 합니다.

그래야 설치를 할 수 있어요. 

 

사용방법을 모르시는 분은

음..

 

죄송합니다. 

공부해주세요 ㅎ

 

뭔가 이것만을 위해서 다루기에는 애매하니 나중에 필요하면 다루겠습니다. 

 

설치하는 방법은 2가지가 있습니다. 

 

1. 폴더를 만들어서 내부에 프로젝트를 만드는 거랑

2. 만들어주는 모듈을 사용하는것 입니다. 

 

전 두번째가 편합니다.

 

 

1. 폴더를 만들어서 내부에 프로젝트 만들기 

 

 

우선 폴더를 만들고 이동합니다. 

mkdir <project-name>
cd <project-name>

 

package.json을 만들어 줍니다. 

// window
echo $null >> package.json
//or
fsutil file createnew package.json 0


// mac
touch package.json

 

package.json 파일 내부에 내용을 채워 넣어 줍니다. 

vim, vi, nano를 쓰면 좋지만 우리 window 사용자분들은 아무것도 설치하지 않으면 없음으로 메모장으로 하면 됩니다. 

cmd 로 메모장은 notepad <file-name> 입니다. 

 

메모장을 열어서 아래 내용을 채워 주세요. 아니면 다른 에디터를 사용하셔도 됩니다.

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

 

그리고 이제 설치해주세요. 

 

npm

npm install nuxt

yarn

yarn add nuxt

 

 

page 파일 만들고

안에 index.vue 만들고

소스 코드 넣고 

돌리면 테스트까지 마무리 입니다. 

// pages 디렉토리 만들고
mkdir pages

// 안에 index.vue 만들고
// window
echo $null >> pages/index.vue
//or
fsutil file createnew pages/index.vue 0

// mac & linux
touch pages/index.vue

// index 채워 주고
<template>
  <h1>Hello world!</h1>
</template>

// 테스트 돌리면 끝!.
npm run dev
yarn dev

쓰고 보니 생각보다 할게 많네요. 

 

밑에는 쉬움.

 

---

 

2. 모듈 사용하기

 

이건 프로젝트 디렉토리까지 한방에 만들어줍니다. 

workspace, project 디렉토리에서 실행해 주시면 됩니다. 

아니면 그냥 내가 만들고 싶은 곳에 만드세요. 

 

cmd, terminal을 실행시켜 해당 디렉토리에서 아래의 명령어를 실행합니다. 

 

 

npm

npm init nuxt-app <project-name>

npx

npx create-nuxt-app <project-name>

yarn

yarn create nuxt-app <project-name>

 

그럼 막 입력하라고 많이 나와요.

그럼 그냥 순서대로 입력하면 되요.

사실 그냥 막 엔터 쳐도 나중에 다 바꿀 수 있습니다. 

삭제도 가능합니다.

그니까 초기에 너무 신경 안써도 되요.

 

아래는 npx 예제 입니다.

 ? Project name                     <app-name>			// test-project
 ? Project description              <app-description>		// nuxt test project
 ? Author name                      <username, name>		// angkum
 ? Choose programming language      <languege> 			// Javascript
 ? Choose the package manager       <package-manager>		// Npm
 ? Choose UI framework              <UI framwork>		// None element-ui는 쓸만합니다.
 ? Chhose custom server framework   <select-server>		// None
 ? Choose Nuxt.js modules           <http communication>	// axios
 ? Choose linting tools             <lint>			// ESLint
 ? Choose test framework            <test-module>		// None
 ? Choose rendering mode            <structure>			// SPA
 ? Choose development tools         <set-tool>			// jsconfig.json

 

project name 

프로젝트 이름입니다. 

맘대로 입력하세요.

 

project description

프로젝트 부가 설명입니다. 

 

Author name

만든이 입니다. 

 

Choose programming language

- javascript

- typescript

 

사용한시는 언어 고르면 됩니다. 전 javascript 사용합니다. typescript 쓰시면 typescript 고르시면 됩니다. 

 

Choose the package manager

 

Choose UI framework

- None

- Ant Design Vue

- Bootstrap Vue

- Buefy

- Bulma

- Chakra UI

- Element

- Framevuerk

- iView

- Tachyons

- Tailwind CSS

- Vuesax

- Vuetify.js

 

vue ui framework를 넣어줍니다. 

여기서 고르셔도 되고 , none으로 해서 나중에 넣어도 됩니다. 

전 vuetify,js, element, bootsrap vue 써봤습니다만 다른건 찾아보시면 잘 나와 있습니다. 

 

 

Choose custom server framework

 

Choose Nuxt.js modules

- Axios

- Progressive Web App (PWA)

- Content

 

그냥 엔터 누르시면 넘어갑니다.

Nuxt에서 추천하는 모듈 3가지 입니다.

nuxt에서 사용되는 모듈을 고르시면 됩니다. 

전 axios만 씁니다. 이걸로 http, server 통신을 합니다.

나중에 다 넣을 수 있습니다. 추가로도 넣을 수 있습니다. 그렇다고 너무 막 고르지는 마세요 ㅎ

 

Choose linting tools

- ESLint

- Prettier

- Lint staged files

- StyleLint

 

Lint는 그... 막...

정확한건 모르겠지만 사람마다 코드 스타일이 다른데 

이걸 통일해주고 문법 오류는 아니지만 그냥 띄어쓰기가 다르다던가 넣어야 할 변수를 안넣었을 때 

경고도 해주고 자동으로 고쳐도 주는 모듈 입니다. 

예를 들어 난 함수 쓸때 

function() {}으로 쓰는데 

function () {}으로 쓰면 띄어쓰기를 잡는다 던가

뭐 그렇습니다. 

 

Choose test framework

- None

- Jest

- AVA

- WebdriverIO

 

테스트 모듈 입니다. 

설치하고 테스트 모듈 돌리면 앱이 잘 돌아갈 수 있는지 테스트 해주는 애들입니다. 

 

Choose rendering mode

- Universal(SSR /SSG)

- Single Page App

 

SSR : Server Side Rendering

SPA : Single Page App

서버 쓰냐 안쓰냐.

페이지 하나야 여러개야 물어봅니다. 

 

Choose development tools

jsconfig.json

쓰면 됩니다. 

 

 

 

 

끝.