[VueJS] NuxtJS + VuetifyJS 프로젝트 설치 (Nuxt 설치)

전에 작성했었던 NuxtJS 웹팩을 받은 후 따로 VuetifyJS를 적용한 글이 있는데(minu0807.tistory.com/71)

버전이 낮은 웹팩에다 적용하다 보니 불편한 점이 몇 있었다.

그래서 그냥 한방에 NuxtJS와 VuetifyJS가 적용된 프로젝트를 만드는 방법이다.

설치 시 나름 최신 버전으로 받아진다.

방법도 쉽다.

 

npm init nuxt-app name

이거 한 줄 이면 시작이다.

name 부분에 입력한 텍스트로 디렉터리가 생성되며, 그 안에 설치가 된다.

프로젝트 명 입력

프로젝트명을 입력하면 모두 설치 완료 후 웹 title 명으로 지정된다. (nuxt.config.js에서 수정 가능)

---

프로그래밍 언어

자신이 원하는 방식 선택

---

이것도 자신이 원하는 방식 선택 보통은 Npm을 선택하지 않을까 싶다.

---

Package manager까지 선택하면 이제 자신이 사용할 UI 프레임워크를 선택하면 된다.

많은 종류가 있고 방향키로 계속 내리면 더 있다. 

지금 캡처 화면에는 안 보이지만 방향키로 내리면 Vuetify.js가 있고, 이 글의 제목대로 일단 Vuetify.js로 선택해서 설치를 하겠다.

---

UI 컴포넌트를 선택하면 나오는 부분이고 원하는 방식을 선택 (난 Axios로 선택)

---

이건 개인이 사용한다면 아마 크게 상관은 없을 것 같고, 협업 프로젝트에 코딩 스타일 통일화를 할 예정이라면 정하면 되는 것 같다.

난 그냥 ESLint로 선택했다.

---

테스트 프레임워크 선택이고, 원하는 방식 선택

---

렌더링 방식 선택이고 저 중에 고르고 설치해도 바꾸고 싶으면 nuxt.config.js에서 옵션을 주고 바꿀 수 있기 때문에 걱정하지 않아도 된다.

---

배포 대상 선택하는 거고, 원하는 방식 선택

---

개발도구 선택, 원하는 방식 선택

---

커밋할 때 깃 username 지정

---

버전 관리 시스템 선택

난 이미 깃에 등록된 디렉터리에 생성해서 설치하는 거라 None으로 선택해서 설치했다.

---

여기까지 하면 이제 설치가 진행된다.

전체 이미지

설치 완료 후 마지막에 나온 것처럼 만들어진 디렉터리로 가서 npm run dev를 치면 빌드 후 실행이 된다.

 

설치된 디렉터리 안의 구조

실행된 화면은 이렇다.

 

그리고 만약 실행 중에 

 WARN  Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.                                                                         21:06:18  
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

이런 경고 문구가 

이렇게 미친 듯이 찍힐 때가 있는데

 

nuxt.config.js에서 build 옵션 부분에 아래와 같이 작성해주면 된다.

babel: {
	plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]]
}

 

이 외에도 package.json을 만들어서 그걸 기반으로 생성하는 방법도 있고 여러 방법이 있는 것 같은데.

처음 만들 때는 이게 젤 편한 것 같다.

nuxtjs.org/docs/2.x/get-started/installation

Installation

위 공식 홈페이지에 가면 다른 설치 방법도 확인할 수 있다.