VSCode 小技巧：自动生成vue模板内容

目录

一、综述

二、实现

1、vscode，IDE左下角，管理——用户代码片段

2、新建代码片段

3、编辑代码片段样式

4、保存即可

三、使用

---

一、综述

vue工程模板几乎都是一致的，三个标签，template、script、style。每次新建一个vue工程，都需要编辑这些模板，可以将这个模板写成文件，直接调用。

二、实现

1、vscode，IDE左下角，管理——用户代码片段

2、新建代码片段

新建代码名称——给代码片段起个名称，我这里就叫vue

3、编辑代码片段样式

"Print to console": {
		    "prefix": "vue",  //这个vue就是每次快速找到这个模块的关键
		    "body": [
		      "<template>",
		      "  <div>$0</div>",
		      "</template>",
		      "",
		      "<script>",
		      "export default {",
		      "  data () {",
		      "    return {}",
		      "  },",
		      "  methods: {},",
		      "}",
		      "</script>",
		      "",
		      "<style type=\"text/css\" scoped>",
		      "</style>",
		      ""
		    ],
		    "description": "A vue file template"
		  }

4、保存即可

三、使用

新建的vue文件中，输入代码片段名称：vue，这时候vscode会自动提示，，选中第一个，回车即可自动输出之前设定的模板。