빠르게 Nuxt.js 2.x 와 Vuetify 로 프로젝트 시작하기

현재 시점으로 각 최신버전을 사용한다. Nuxt.js 2.4.5, Vuetify 1.5.5

인터넷익스플로러 11 (이후 간단히 IE11 로 칭한다 )를 지원하고 Nuxt.js 와 Vuetify 같이 사용하는 방법은 인터넷에 여러개 있다. 하지만 자바스크립트 진영의 개발 속도는 엄청나게 빨라서 1년만 지나면 거의 사용할 수 없는 경우가 많다.

Nuxt.js 같은 경우도 이런경우 인데. 2.x 버전이후 기존에 통용되던 방식으로는 제대로 IE11 지원하지 않아 babel 설정에 애를 먹는 경우도 많다. 그래서 호환성이 좋고 간단하게 프로젝트를 시작할 수 있는 방법을 찾아봤다. 며칠을 이것저것 삽질했는데.. 다 뭔가 버젼이 안맞고 해서 제대로 되지 않았다.

결국 Nuxt.js 공식웹사이트 영문버전에 있는 방법이 최선이었다. ( *주의 : Nuxt.js 공식웹사이트 한국어버전은 너무 예전 버전여서 지금은 맞지않는 내용이 많다. 현재 시점으로 0.10.7 ㅡ.ㅡ;; )

공식 문서 : https://nuxtjs.org/guide/installation

create-nuxt-app 을 사용하는 방식이 가장 편리하다. 개인적으로 yarn 을 주로 사용하고 있다. 아래 처럼 콘솔에서 실행하면 프로젝트명이나 설명, 서버 프레임워크, UI 프레임워크, 테스트 프레임워크, 패키지 매니저 등을 몇가지 선택할 수 있다. 물음표(?)로 시작하는 부분이 선택하는 부분이다. 이를 통해 간단하게 프로젝트 초기화를 할 수 있다.

$ yarn create nuxt-app nuxt2-vuetify-test
yarn create v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@2.5.1" with binaries:
      - create-nuxt-app
> Generating Nuxt.js project in /home/doogle/projects/vue/nuxt/nuxt2-vuetify-test
? Project name (nuxt2-vuetify-test) 
? Project description My riveting Nuxt.js project
? Use a custom server framework express
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework vuetify
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name doogle
? Choose a package manager yarn

yarn run v1.13.0
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix

/home/doogle/projects/vue/nuxt/nuxt2-vuetify-test/nuxt.config.js
  1:29  error  Unexpected require, please use import instead                 nuxt/no-cjs-in-config
  2:13  error  Unexpected require, please use import instead                 nuxt/no-cjs-in-config
  4:1   error  Unexpected module.exports, please use export default instead  nuxt/no-cjs-in-config

✖ 3 problems (3 errors, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

  To get started:

        cd nuxt2-vuetify-test
        yarn run dev

  To build & start for production:

        cd nuxt2-vuetify-test
        yarn run build
        yarn start

  To test:

	cd nuxt2-vuetify-test
	yarn run test

Done in 100.29s.

Nuxt 는 국내 내용을 찾기가 힘들어서 작업할때 막히는 경우가 많은데다 공식웹사이트 한국어버전도 뒤통수를 치기때문에 항상 영문 공식버전을 기준으로 참고해야 한다.

차기 버전에는 제발 컴파일좀 빨라지면 좋겠다. Go언어처럼 빨라지면 얼마나 좋을까 ^^;