在一个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.最终