vscode,创建用户代码片段(vue)

277 阅读1分钟
{
  // 打印输出
  "Print to console": {
    // 前缀  也就是用户输入的快捷键内容
    "prefix": "vue",
    // 输出内容
    "body": [
      "<!-- $TM_FILENAME_BASE -->", // $TM_FILENAME_BASE 文件夹的名称
      "<template>",
      "  <div>",
      "     创建组件 ",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, defineEmits, defineProps, nextTick, reactive, onMounted, watch, computed, onUnmounted } from 'vue'",
      "import { useStore } from 'vuex'",
      "import { useRouter,useRoute } from 'vue-router'",
      "const router = useRouter()",
      "const route = useRoute()",
      "const store = useStore()",
      "onMounted(() => {",
      "console.log('组件加载完成,但dom还没有挂载')",
      "})",
      "nextTick(() => {",
      "console.log('组件加载完成,dom已经挂载完毕,可以操作元素大小等')",
      "})",
      "onUnmounted(() => {",
      "console.log('组件卸载')",
      "})",
      "</script>",
      "",
      "<style  scoped>",
      "",
      "</style>",
      ""
    ],
    // 描述
    "description": "vue3 基础内容搭建"
  }
}