vsCode中如何使用快捷键建立vue默认组件

• 打开Visual Studio Code;
• 文件-->首选项-->用户代码片断-->输入框输入vue.json;
• 将以下代码复制到文件中：

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      " <div></div>",
      "</template>",
      "",
      "<script>",
        "export default {",
        " data () {",
        " return {",
        " }",
        " }",
        "}",
      "</script>",
      "",
      "<style lang='stylus' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }
}复制代码

• 而后新建.vue文件，在空白文件中输入vue，回车或tab可得以下模板：

<!-- vue快捷建立组件 -->
<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>
复制代码

若是你喜欢使用Sass或Less,能够把lang作相应调整

新模板第一行可备注组件相关内容，例：<!-- vue快捷建立组件 -->