.vue文件_VSCode新建vue文件自定义模版

在一个Vue的项目中，反复的新建.vue文件是一个必不可少的工序。本着科技让人偷懒的原则，我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板。

具体步骤如下

1、选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue选vue后，编辑器会自动打开一个名字为vue.json的文件

2、复制以下内容到这个文件中：

{    // 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": [            "",            "  

$0", " ", "

", "\n", ", ", "", "$2" ], "description": "Log output to console" }}

    $0 表示生成代码后光标的位置 ;

    prefix 表示生成对应预设代码的命令(此处设置的vue)保存关闭文件；

3、新建.vue文件，输入vue，按回车，页面结构自动生成

4.最终