vs code 创建vue模版

时间:2022-07-23
本文章向大家介绍vs code 创建vue模版,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

ctrl + shift + p

输入 snippets, 新建片段,命名vue, 生成vue.json

粘贴替换

{

    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 

    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 

    // same ids are connected.

    // Example:

    // "Print to console": {

    //     "prefix": "log",

    //     "body": [

    //         "console.log('$1');",

    //         "$2"

    //     ],

    //     "description": "Log output to console"

  // }

      "Print to console": {

        "prefix": "vue",

        "body": [

          "<template>",

          "  <div class="${TM_FILENAME_BASE}-wrap">${TM_FILENAME_BASE}</div>",

          "</template>",

          "",

          "<script>",

          "  export default {",

          "    name: '${TM_FILENAME_BASE}',",

          "    components: {},",

          "    props: {},",

          "    data() {",

          "      return {};",

          "    },",

          "    watch: {},",

          "    computed: {},",

          "    methods: {},",

          "    created() {},",

          "    mounted() {},",

          "    destroyed() {},",

          "  }",

          "</script>",

          "<style lang="scss"  scoped>",

          "  .${TM_FILENAME_BASE}-wrap {",

          "  }",

          "</style>"

        ],

        "description": "A vue file template"

      }

}