vscode编辑器自动生成.vue文件三组标签结构的方法_vscode生成vue页面结构

作者：2023面试高手 | 2024-03-14 00:39:07

踩

vscode生成vue页面结构

1、选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue

选择vue后，编辑器会自动打开一个名字为vue.json的文件

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

   { 
 
  "Print to console": { 
 
  "prefix": 
  "vue", 
 
  "body": [ 
 
  "<template>", 
 
  " <div>$0</div>", 
 
  "</template>", 
 
  "", 
 
  "<script>", 
 
  "export default {", 
 
  "", 
 
  "}", 
 
  "", 
 
  "</script>", 
 
  "<style>", 
 
  "</style>" 
 
   ], 
 
  "description": 
  "Log output to console" 
 
   } 
 
   }

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

prefix 表示生成对应预设代码的命令（此处设置的vue）

保存关闭文件；

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

4.最终

@转载

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/231494