VS Code 配置 Vue2 / Vue3 基本模板 代码

• 步骤都是一样的，配置的时候，具体的写法不一样；
• 给孩子点点关注吧！????

1. 打开对应的配置文件

2. 给此配置起名字

• 在编译器输入对应的名字就能看到回车之后就能生成基本模板代码；

3. 配置模板代码

• 注意：
  • 这是个 json 文件；
  • 不能写注释；
  • 必须用双引号包裹（外双内单，最外面的一层引号必须是双引号）；

3.1 vue2模板代码

• 根据自己的习惯，也可以自己添加或删除东西；

{
    "Print to console": {
        "prefix": "vue2",
        "body": [
            "<template>",
            "  <div class=\"$1\"></div>",
            "</template>",
            "",
            "<script>",
            "  export default {",
            "    name: '',",
            "    data() {",
            "      return {",
            "        ",
            "      }",
            "    }",
            "    methods: {},",
            "    created() {}",
            "  }",
            "</script>",
            "",
            "<style scoped lang=\"less\">",
            "</style>"
        ],
        "description": "Log output to console",
    }
}

• 效果展示：
  • 输入 vue2 之后，按下回车即可生成基本骨架；

3.2 vue3模板代码

{
    "Print to console": {
        "prefix": "vue3",
        "body": [
            "<script setup>",
            "  import { ref, reactive, onMounted } from 'vue';",
            "  ",
            "  onMounted(() => {})；",
            "</script>",
            "",
            "<template>",
            "  $1",
            "</template>",
            "",
            "<style scoped lang=\"scss\">",
            "</style>"
        ],
        "description": "Log output to console",
    }
}

• 效果展示：
  • 输入 vue3 之后，按下回车即可生成基本骨架；