使用vscode如何设置vue模板

港控/mmm° 2023-06-10 11:26 8阅读 0赞

1.选择File中的Preferences中的User Snippets  
2.搜索vue，选择vue.json  
![在这里插入图片描述][20191027154031435.png]  
3.将下面内容复制到vue.json的大括号中，保存

"Print to console": {
                
         "prefix": "vue",        
         "body": [          
             "<template>",          
             "   <div></div>",          
             "</template>",          
             "",
             "<script>",          
             "export default {",
             "   data () {",
             "      return {",
             "",
             "      };",
             "   },",
             "",
             "   components: {},",
             "",
             "   computed: {},",
             "",
             "   methods: {}",
             "}",
             "</script>",
             "<style lang='css' scoped>",
             "",
             "</style>"
       ],
       "description": "Log output to console"
    }

4.测试：新建一个vue文件，输入vue按Tab键生成vue模板（模板的内容可以根据自己的需要在上面的粘贴的代码中做调整）如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA1NzE1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA1NzE1_size_16_color_FFFFFF_t_70 1]

[20191027154031435.png]: /images/20230531/0bec4c43aab343b1bc4e0ae8803532c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA1NzE1_size_16_color_FFFFFF_t_70]: /images/20230531/b9c6eef76b1a458daff1bb0246547908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA1NzE1_size_16_color_FFFFFF_t_70 1]: /images/20230531/a71ba79dbc96433c826a915d2c6a4acc.png