create-nuxt-app v3.2.0을 사용하여 Nuxt+Typerscript 프로젝트 구축

이마

주의

이 글은 큐타가 집필한 작품.의 복제품이다.
개인이 쓴 글은 차례로 Zenn으로 이동합니다.

개요

create-nuxt-app 명령을 사용하여 TS+Nuxt 프로젝트를 만들 때 언제 스타일이 바뀌었는지 감동적이어서 쓰기로 했습니다.
한편 이 기사는 Nuxt를 사용하는 middleware Module의 API 서버 구축을 전제로 추진돼 SSR을 적용했다.
SPA의 경우도 크게 다르지 않으니 미리 주의하십시오.

공사를 시작하다

yarn을 사용하면 대화식 항목을 cli로 시작할 수 있습니다.
npm에서도 버전 5.2 이상이면 npx 명령은 상기 같은 대화 방식으로 프로젝트를 시작할 수 있습니다.
【 yarn 】

$ yarn create nuxt-app {project-name}

【 npx 】

$ npx create-nuxt-app {project-name}

최근 넥스트 인근에서 과거 타입과 맞지 않는다고 여겨졌던 일들이 뿌리에 박힌 듯 TS를 향한 업데이트가 진행됐습니다.
정신을 차리면 이 프로젝트를 시작할 때 프레임이 자바스크립트인지 타입인지 선택할 수 있습니다.
또한 API 기능을 이번에 제작할 예정이므로 Deployment target Hosting Node를 사용하십시오.js를 사용하세요.
내가 실시했을 때 대화의 집행 결과는 다음과 같다.
실제로 해보면 알겠지만 질문이 없는 선택 항목은 물론 질문 자체가 줄어드는 인상을 준다.

? Project name: {project name}
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: Semantic Pull Requests

서류

얼마 전(4월 단계일 것) 여기서부터 타입 스크립트를 사용할 준비가 필요하다.
그러나 지금까지 필요한 가필 수정이 언제부터 편입됐는지 구체적으로 다음과 같은 설정은 필요 없다.

- Library
  - @nuxt/typescript-buildがバンドルされたのでインストール不要
  - @nuxtjs/eslint-config-typescriptもバンドルされましたのでインストール不要
  - @nuxt/typescript-runtime もバンドルされましたのでインストール不要
- nuxt.config.json
  - buildModule内、 `'@nuxt/typescript-build'`の記述が不要（最初から書いてある）
- tsconfig.json
  - デフォルトで準備されてます
- .eslintrc.js
  - 以前はTS用に書き換える必要がありましたが、デフォルトで @nuxtjs/eslint-config-typescript が記述されており、設定が反映済みでしたので修正不要

하지만, 패키지.json 내의script 프로젝트에 사용되는 nuxt-ts는 기본적으로 전 세계에 설치되는 것을 전제로 한다.yarn dev에 없는nuxt-ts 오류가 발생하면 아래와 같은package.json에 없는script를 고쳐 주십시오.

"script":{
  "dev": "npx nuxt-ts",
  "build": "npx nuxt-ts build",
  "start": "npx nuxt-ts start",
  "generate": "npx nuxt-ts generate",
}

이음매에 각각 npx 명령만 추가하면 된다.

부족 라이브러리 추가

환경에 부족한 프로그램 라이브러리를 추가 개발합시다.

$ yarn add -E -D regenerator-runtime

(없어도 움직일 수도 있어요. pug로 썼는데 모자랄 수도 있어요)

원본 폴더 정리

대화식으로 프로젝트를 만들 때 원본 폴더가 무엇인지 모릅니다
API 서버를 설치한 후에도 이해하기 어려워질 수 있음
일반 폴더 구성으로 수정하고 싶습니다.
먼저 프로젝트 경로에 src 디렉터리를 만들고 그 안에 api(API server) 폴더를 만듭니다.
다음src 다음 폴더를 디렉터리 아래로 이동합니다.

- assets
- components
- layouts
- middleware
- node_modules
- pages
- plugins
- static
- store

기록기로 이동하고 싶은 사람은 아래 명령을 사용하세요.

mv assets components layouts pages plugins static store middleware src/

config 클래스 수정

nuxt.config.js에서 다음과 같은 내용을 보충한다.

module.exports = {
  srcDir: 'src/' // <-これを追記
}

다음은 src 바로 아래에 vue-shim.d.ts 파일을 작성하고 다음과 같은 내용을 기술하십시오.

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

이vue-shim.d.ts는 ts가 vue를 처리할 때 vu 파일이 원형을 유지할 수 없기 때문에 필요한 파일입니다.
또한vue의 파일 위치도 바뀌었기 때문에tsconfig입니다.제이슨에서 보충, 설정을 하세요.

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [ "ESNext", "ESNext.AsyncIterable", "DOM" ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [ "./src/*" ],
      "@/*": [ "./src/*" ]
    },
    "types": [ "@types/node", "@nuxt/types" ]
  },
  "files": [ "src/vue-shim.d.ts" ], //← これを追記
  "include": [ "./src/**/**/*.ts", "./src/**/**/*.vue" ]
}

필요 없는 파일 삭제

CLI로 프로젝트를 만들면 모든 폴더에 README를 추가합니다.
하지만 아무도 보지 않을 것 같아서 보러 가기로 마음먹었어요.

find ./src -name "*.md"|xargs rm

src 밑에 존재하는 README를 차단한다.

부팅

완성되면 먼저 시동을 걸어 봅시다.
그냥 yarn dev하고 브라우저로 localhost:3000하세요.