VSCODE vue 快速构建模板

VSCODE vue 快速构建模板

https://blog.csdn.net/he1234555/article/details/125910926?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522b945699a5744deaed8b85e05bc3dffad%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D\&request_id=b945699a5744deaed8b85e05bc3dffad\&biz_id=0\&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1\~rank_v31_ecpm-6-125910926-null-null.142^v102^pc_search_result_base1\&utm_term=vscode快速构建 vue\&spm=1018.2226.3001.4187

{
  "Vue3 SFC Template": {
    "prefix": "vue3",
    "body": [
      "<!-- $1 -->",
      "<template>",
      "  <div class=\"$2\">$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${3:XxxView}', // ✅ 推荐使用多词组件名",
      "",
      "  // 引入的组件需要注册",
      "  components: {},",
      "",
      "  // 数据区",
      "  data() {",
      "    return {",
      "      $4",
      "    };",
      "  },",
      "",
      "  // 计算属性",
      "  computed: {},",
      "",
      "  // 监听数据变化",
      "  watch: {},",
      "",
      "  // 方法集合",
      "  methods: {",
      "    $5",
      "  },",
      "",
      "  // 生命周期 - 创建完成",
      "  created() {",
      "    // $6",
      "  },",
      "",
      "  // 生命周期 - 挂载完成",
      "  mounted() {",
      "    // $7",
      "  },",
      "",
      "  // 生命周期 - 更新之前",
      "  beforeUpdate() {},",
      "",
      "  // 生命周期 - 更新之后",
      "  updated() {},",
      "",
      "  // 生命周期 - 卸载前",
      "  beforeUnmount() {",
      "    // 替代 beforeDestroy",
      "    // $8",
      "  },",
      "",
      "  // 生命周期 - 卸载后",
      "  unmounted() {",
      "    // 替代 destroyed",
      "    // $9",
      "  },",
      "",
      "  // keep-alive 缓存组件激活时触发",
      "  activated() {},",
      "",
      "  // keep-alive 缓存组件失活时触发",
      "  deactivated() {}",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "$10",
      "</style>"
    ],
    "description": "Vue 3 Single File Component (SFC) template with modern lifecycle hooks and multi-word name"
  }
}