vscode自定义vue模版

野性酷女 2023-02-10 15:28 40阅读 0赞

第一步：在vscode里面下载Vetur这个插件安装一下安装过的请忽略![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70][]

第二部步：在code->首选项->用户代码片段

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70 1][]

这是选择之后的页面：下面进行配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70 2][]

模版的内容可以自己多定义一点，按需定义，比如说生命周期和其他的计算属性等等。。。。。

（方便复制）

{
    	"Print to console": {
    		"prefix": "vue",
    		"body": [
    			"<template>",
    			"  <div></div>",
    			"</template>",
    			"",
    			"<script>",
    			"export default{",
    			"  data(){",
    			"    return{",
    			"    }",
    			"  }",
    			"}",
    			"</script>",
    			"",
    			"<style scoped>",
    			"",
    			"</style>",
    			""
    		],
    		"description": "Log output to console"
    	}
    }

希望对新手可以有所帮助，在此记录一下。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200521093006998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200521093146683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200521093321385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2RvbmdfeWFfeXVu,size_16,color_FFFFFF,t_70