Nuxt (v2.4 이상) + Typescript 설정

이전에 Nuxt(v2.4 미만) + Typescript 설정을 썼지만,
Nuxt가 v2.4 이후 공식적으로 Typescript를 지원했기 때문에, 신규의 어플리케이션의 셋업을 해 보았다.

이 항목의 결과로 완성되는 구성
2019/06/10 현재의 주요 모듈 버전은 다음과 같습니다.

nuxt: 2.8.1

typescript: 3.5.1

pug: 2.0.3

node-sass: 4.12.0

애플리케이션 만들기

준비로서 Node.js, Yarn의 설치가 필요하지만, 거기는 할애.

다음 명령으로 응용 프로그램을 초기화합니다.

$ yarn create nuxt-app nuxt-ts-example

위의 명령을 실행하면 몇 가지 질문을받습니다.
작성하는 어플리케이션의 요건에 따라 대답하면 된다고 생각한다.

여기에서는 다음과 같이 대답하여 작업을 진행한다.

? Project name nuxt-ts-example
? Project description My beautiful Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatter, Prettier, Axios
? Use a custom UI framework none
? Use a custom test framework jest
? Choose rendering mode Single Page App
? Author name HeRo
? Choose a package manager yarn

대답이 끝나면 모듈 다운로드와 같은 응용 프로그램의 초기화가 수행됩니다.
처리가 종료되면 다음 메시지가 출력됩니다.

  To get started:

    cd nuxt-ts-example
    yarn run dev

  To build & start for production:

    cd nuxt-ts-example
    yarn run build
    yarn start

  To test:

    cd nuxt-ts-example
    yarn run test

위에서부터 순서대로 개발 서버의 기동 방법, 빌드 방법, 테스트 실행 방법을 나타내고 있다.

초기화된 어플리케이션을 yarn run dev 를 실행해 확인해 본다.
기본값으로 남아 있으면 http://localhost:3000/로 이동하면 다음 페이지가 열립니다.

Typescript 소개

Typescript화에 필요한 모듈을 다음의 명령으로 인스톨 한다.
nuxt-property-decorator은 필수는 아니지만, Typescript를 도입한다면 Vue 모듈도 Class로 구현하는 것이 좋을 것이다. 그 경우에 도움이.

$ yarn add -D @nuxt/typescript
$ yarn add ts-node nuxt-property-decorator
$ touch tsconfig.json

tsconfig.json은 yarn run dev를 실행하면 빈 파일에 내용이 기록됩니다.

nuxt.config.js -> nuxt.config.ts

필수는 아니지만, 타입 체크를 받을 수 있으므로 nuxt.config.js를 TS화해 둔다.
공식 문서에 설명된 대로 확장자를 .ts로 변경합니다.

$ mv nuxt.config.js nuxt.config.ts

형식 검사를 위해 nuxt.config.ts를 다음과 같이 다시 씁니다.

nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // コンフィグ
}

export default config

모듈 코드의 Typescript화

이것도 필수는 아니지만, pages/index.vue의 스크립트 부분을 TS화해 본다.

pages/index.vue

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

상기 부분을 다음과 같이 재작성하면 좋다

pages/index.vue

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: { logo: Logo }
})
class Index extends Vue {}
export default Index
</script>

Pug 소개

우선 필요한 모듈 설치.
다음 명령을 실행합니다.

$ yarn add -D pug pug-plain-loader

그리고, 각 모듈의 <template> 부분을 Pug로 재기록하면 된다.
html2pug - convert your html code to pug 등을 사용하면 간단.

예로서 pages/index.vue의 Pug화 예를 이하에 나타낸다.

pages/index.vue

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt-ts-example
      </h1>
      <h2 class="subtitle">
        My beautiful Nuxt.js project
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
          >Documentation</a
        >
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
          >GitHub</a
        >
      </div>
    </div>
  </div>
</template>

위의 HTML을 다음과 같이 다시 작성하면 좋다.

pages/index.vue

<template lang="pug">
.container
  div
    logo
    h1.title
      | nuxt-ts-example
    h2.subtitle
      | My beautiful Nuxt.js project
    .links
      a.button--green(href="https://nuxtjs.org/" target="_blank") Documentation
      a.button--grey(href="https://github.com/nuxt/nuxt.js" target="_blank") GitHub
</template>

Sass 도입

필요한 모듈을 설치하려면 다음 명령을 실행합니다.

$ yarn add -D node-sass sass-loader

그리고 역시 각 컴퍼넌트의 <style> 부분을 SASS로 재기록해 갈 뿐.
css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code 등을 사용하면 바삭바삭하게 변환할 수 있다.

아래는 pages/index.vue의 SASS 화의 예를 보여줍니다.

pages/index.vue

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

상기를 이하와 같이 재기록하면 된다.

pages/index.vue

<style lang="sass">
.container
  margin: 0 auto
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  text-align: center

.title
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
  display: block
  font-weight: 300
  font-size: 100px
  color: #35495e
  letter-spacing: 1px

.subtitle
  font-weight: 300
  font-size: 42px
  color: #526488
  word-spacing: 5px
  padding-bottom: 15px

.links
  padding-top: 15px
</style>

요약

공식적으로 Typescript가 지원됨에 따라 이전보다 쉽게 ​​TS화할 수 있게 되었다.
Pug도 SASS도 필요한 모듈을 설치하는 것만으로 특별히 설정하지 않고 사용할 수 있어 간단.

참고

설치 - Nuxt.js

TypeScript 지원 - Nuxt.js