如何在.vue檔快速建立程式架構

.vue檔案都要有如下架構

<script setup></script>
<template></template>
<style scoped></style>

要在 VS Code 中設定一個自動生成 .vue 檔案結構的功能，你可以透過新增自訂的片段（snippets）來實現。

以下是具體步驟：

1.開啟 Vue.js 的 Snippets 設定檔： 在 VS Code 中，按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS），然後輸入 Preferences: Configure User Snippets，選擇 Vue（或 vue.json）來開啟 Vue.js 的 snippets 設定檔。

2.新增自訂片段： 在開啟的 snippets 檔案中，新增以下的片段：

{
    "Vue 3 Composition API Template": {
        "prefix": "vue",
        "body": [
            "<script setup>",
            "  $0",
            "</script>",
            "",
            "<template>",
            "</template>",
            "",
            "<style scoped>",
            "</style>"
        ],
        "description": "Vue 3 Composition API Basic Structure"
    }
}

3.儲存設定檔： 儲存這個設定檔後，重新開啟一個 .vue 檔案，然後試著輸入 vue 並按下 Tab，你應該會看到設定好的範本自動出現。

這樣你就可以快速地在 VS Code 中生成帶有 <template>, <script setup>, 以及 <style scoped> 區塊的 Vue 3 Composition API 的基本架構了。