vscode 创建vue2模板

作者: 前端_自嘲君 | 来源:发表于2023-04-20 14:42 被阅读0次

1、打开文件-》首选项-》配置用户代码片段
2、打开vue.json

vue-json.png

3、替换文中代码

"Print to console": {
        "prefix": "vue",
        "body": [
            "<!--",
            "  *@description $1",
            // "  *@fileName $TM_FILENAME", //当前文件名称
            "  *@fileName $RELATIVE_FILEPATH", // 相对路径
            "  *@author [前端_自嘲君]", // 作者名称
            "  *@date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
            "!-->",
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "<script>",
            "export default {",
            "  data () {",
            "    return {", 
            "",
            "    }",
            "  }",
            "}",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to console"
    }

4、新建页面，输入vue 回车查看效果

注：参考文档：https://code.visualstudio.com/docs/editor/userdefinedsnippets#snippet-syntax