Nuxt.js + TypeScript + Composition API .vue 파일 템플릿

결론

VSCode에서 nuxtts를 입력하면 다음 템플릿이 출력됩니다.

Hoge.vue

<template>
  <div></div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
} from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const state = reactive({

    })
    return {
      state,
    }
  }
})
</script>

<style>

</style>

절차

[ctrl] + [shift] + [p]를 누르고 User Snippets를 입력하고 Enter를 누릅니다.

vue를 입력하여 vue.json를 만듭니다.
다음 내용을 입력합니다. 코멘트 아웃 부분은 디폴트의 기재입니다. 필요하지 않은 경우 지우십시오.

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "nuxtTs": {
        "prefix": "nuxtts",
        "body": [
            "<template>",
            "\t<div></div>",
            "</template>",
            "",
            "<script lang=\"ts\">",
            "import {",
            "\tdefineComponent,",
            "\treactive,",
            "} from '@nuxtjs/composition-api'",
            "",
            "export default defineComponent({",
            "\tsetup() {",
            "\t\tconst state = reactive({",
            "",
            "\t\t})",
            "\t\treturn {",
            "\t\t\tstate,",
            "\t\t}",
            "\t}",
            "})",
            "</script>",
            "",
            "<style>",
            "",
            "</style>"
        ]
    }
}

저장하고 텍토에 .vue 파일을 만든 다음 nuxtts


했습니다.

보충

우리는 @vue/composition-api 대신 @nuxtjs/composition-api을 사용합니다. asyncData 를 사용할 수 없는 등의 번거로운 문제를 어느 정도 해결해 줍니다.
단지 버전이 얕기 때문에 갑자기 사양이 바뀌거나 할지도 모릅니다. (거기는 애경)

말미의 쉼표나 style의 언어등은 각각 커스터마이즈 해 주시면 좋겠습니다.

감상

Vue3 릴리스 축하합니다. Nuxt.js의 Vue3 대응이 기다리고 있습니다!

코드 스니펫 만들려고 생각했는데, 무엇이 귀찮아""라든가, 라든지\t(탭)라든지 일일이 박는 곳이군요.
어느 정도는 일괄 입력으로 어떻게든 됩니다만, 탭 정렬을 위한\t타입이 힘들다. . .

Vue, Composition API, TypeScript로의 개발은 아직 코딩의 작법의 디펙트 같은 것이 정해져 있지 않다고 생각하므로, 이런 템플리도 좋다고 하는 것이 있으면 꼭 가르쳐 주세요!

(추기) "vscode 스 니펫 작성"에서 구그하면 엄청 보통으로 스니펫 작성 도구이있었습니다 (격노)
딱딱한 기호를 박히기 전에 조사하지 않은 자신에 대한 분노이며 스 니펫 작성 도구는 하나님입니다. 앞으로 적극적으로 사용합니다.

(추기 2) 투고하고 나서 생각했습니다만, Vue3 아무것도 관계 없기 때문에 타이틀로부터 삭제했습니다()