VScode快速创建自定义的vue模板

叁歲伎倆 2023-03-01 05:55 8阅读 0赞

### 目录 ###

*   *  步骤一：打开设置的Uers snippets
     *  步骤二：点击新建自定义模板
     *  步骤三：输入你想起的名字，随便起，然后回车
     *  步骤四：复制下面代码即可，然后保存
     *  步骤五：在.vue文件中使用
     *  效果

## 步骤一：打开设置的Uers snippets ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

## 步骤二：点击新建自定义模板 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

## 步骤三：输入你想起的名字，随便起，然后回车 ##

![在这里插入图片描述][20200722152425398.png]

## 步骤四：复制下面代码即可，然后保存 ##

{ 
    	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    	// is left empty or omitted, the snippet gets applied to all languages. 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": { 
    	// "scope": "javascript,typescript",
    	// "prefix": "log",
    	// "body": [
    	// "console.log('$1');",
    	// "$2"
    	// ],
    	// "description": "Log output to console"
    	// }
    	"Create vue template": { 
    		"prefix": "vue",
    		"body": [
    			"<template>",
    			" <div>",
    			" ",
    			" </div>",
    			"</template>",
    			"",
    			"<script>",
    			"export default {",
    			" name: '$1',",
    			" data () {",
    			" return {",
    			" }",
    			" },",
    			" methods:{",
    			" }",
    			"}",
    			"</script>",
    			"",
    			"<style scoped>",
    			"",
    			"</style>"
    		],
    		"description": "Create vue template"
    	}
    
    }

实际上就是加个vue的模板，看懂的可以自行更改定义~

## 步骤五：在.vue文件中使用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20230209/b9da256389134e5498223ff63cd57a16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20230209/a7e257cc47f54f9a95a628e0d318d621.png
[20200722152425398.png]: https://img-blog.csdnimg.cn/20200722152425398.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200722152720877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020072215275559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70