VScode如何快速生成.vue文件的模板

  • 选择VScode顶部菜单：文件 -> 首选项 -> 用户代码片段；
  • 在弹出的输入框中输入vue，选择vue.json文件；
  • 使用如下配置内容替换里面的文件即可；
    vue.json：
 {
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
  ],
    "description": "Log output to console"
  }
}

$0 表示你希望生成代码后光标的位置；
prefix 表示生成对应预设代码的命令，这里配置表示输入vue然后回车就会生成；

这样我们新建一个xx.vue文件，输入vue以后回车即可生成vue模板代码。

posted on 2022-02-23 13:05  zyp_java_net  阅读(299)  评论(0)  编辑  收藏  举报

导航