在vue开发中，我们每次新建页面都会需要写一大部分重复代码。那么有什么办法，能够建立模版：vscode是可以进行相关配置的。

1、这里点击用户代码片段，1. 用快捷Ctrl + Shift + P唤出控制台也可以，然后输入

      1.1 接着输入vue

j

第二种打开方式

1、输入vue

2、vue2的模版

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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": {
		"prefix": "vue2",
		"body": [
			"<!-- $1 -->",
            "<template>",
            "  <div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  //import引入的组件需要注入到对象中才能使用",
            "  components: {},",
            "    data() {",
            "    //这里存放数据",
            "      return {",
            "",
            "      };",
            "    },",
            "  //监听属性 类似于data概念",
            "  computed: {},",
            "  //监控data中的数据变化",
            "  watch: {},",
            "  //方法集合",
            "  methods: {",
            "",
            "  },",
            "  //生命周期 - 创建完成（可以访问当前this实例）",
            "  created() {",
            "",
            "  },",
            "  //生命周期 - 挂载完成（可以访问DOM元素）",
            "  mounted() {",
            "",
            "  },",
            "  beforeCreate() {}, //生命周期 - 创建之前",
            "  beforeMount() {}, //生命周期 - 挂载之前",
            "  beforeUpdate() {}, //生命周期 - 更新之前",
            "  updated() {}, //生命周期 - 更新之后",
            "  beforeDestroy() {}, //生命周期 - 销毁之前",
            "  destroyed() {}, //生命周期 - 销毁完成",
            "  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "  //@import url($3); 引入公共css类",
            "$4",
            "</style>"
		],
		"description": "A vue file template"
	}
}

3、下面是vue3的配置代码

{
	"Print to console": {
	  "prefix": "vue3",
	  "body": [
		"<template>",
		"  <div></div>",
		"</template>",
		"",
		"<script>",
		"import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
		"export default {",
		"  name: '',",
		"  setup() {",
		"    console.log('1-开始创建组件-setup')",
		"    const data = reactive({})",
		"    onBeforeMount(() => {",
		"      console.log('2.组件挂载页面之前执行----onBeforeMount')",
		"    })",
		"    onMounted(() => {",
		"      console.log('3.-组件挂载到页面之后执行-------onMounted')",
		"    })",
		"    return {",
		"      ...toRefs(data),",
		"    }",
		"  },",
		"}",
		"",
		"</script>",
		"<style scoped lang='less'>",
		"</style>",
		
	],
	  "description": "Log output to console"
	}
  }
  

4、vue3.2 的配置代码

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div $1></div>",
      "</template>",
      "",
      "<script setup>",
       "import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance } from 'vue';",
      "import { useStore } from 'vuex';",
      "import { useRoute, useRouter } from 'vue-router';",
       "const { proxy } = getCurrentInstance();",
        "// proxy 替代 this",
      "/**",
      "* 仓库",
      "*/",
      "const store = useStore();",
      "/**",
      "* 路由对象",
      "*/",
      "const route = useRoute();",
      "/**",
      "* 路由实例",
      "*/",
      "const router = useRouter();",
      "//console.log('1-开始创建组件-setup')",
      "/**",
      "* 数据部分",
      "*/",
      "const data = reactive({})",
      "onBeforeMount(() => {",
      "  //console.log('2.组件挂载页面之前执行----onBeforeMount')",
      "})",
      "onMounted(() => {",
      "  //console.log('3.-组件挂载到页面之后执行-------onMounted')",
      "})",
      "watchEffect(()=>{",
      "})",
      "// 使用toRefs解构",
      "// let { } = { ...toRefs(data) } ",
      "defineExpose({",
      "  ...toRefs(data)",
      "})",
      "",
      "</script>",
      "<style scoped lang='less'>",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

5、新建完页面，输入vue3，按Tab键或者回车都可以出现