使用vs code 生成 VUE 自动生成初始化模板

第一步

打开vscode, 文件-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json

第二步

复制以下代码,保存

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!--",
			"  功能：${1:功能描述}",
			"  作者：兜兜里有糖",
			"  邮箱：麋鹿不迷路@糖.兜兜",
			"  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
			"  版本：v1.0",
			"  修改记录：",
			"  修改内容：",
			"  修改人员：",
			"  修改时间：",
			"-->",
			"<template>",
			"  <div class='${2:该组件名称}'>$5</div>",
			"</template>",
			"<script>",
			"//这里可以import(导入)其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"",
			"export default {",
			"  components: {/**注册组件*/},",
			"  props:{/**接受父组件传值*/ },",
			"  name:'${2:该组件名称}',",
			"  data() {",
			"    return {",
			"",
			"    };",
			"  },",
			"  computed: {/**计算属性*/ },",
			"  watch: {/**监听data数据变化*/ },",
			"  methods: {/**所有方法*/",
			"",
			"  },",
			"  created() {/**创建组件时执行(有VM对象this)*/",
			"",
			"  },",
			"  mounted() {/**加载完组件时执行(主要预处理数据)*/ },",
			"  beforeCreate() {/**生命周期 - 创建之前*/},",
			"  beforeMount() {/**生命周期 - 挂载之前*/},",
			"  beforeUpdate() {/**生命周期 - 更新之前*/},",
			"  updated() {/**生命周期 - 更新之后*/},",
			"  beforeDestroy() {/**生命周期 - 销毁之前*/},",
			"  destroyed() {/**生命周期 - 销毁完成*/},",
			"  activated() {/**keep-alive组件激活时调用。仅针对keep-alive组件有效*/ },",
			"  deactivated() {/**keep-alive组件停用时调用。仅针对keep-alive组件有效*/ },",
			"}",
			"</script>",
			"<style scoped>",
			"$4",
			"</style>"
		],
		"description": "自动生成VUE模板"
	}
}

第三步

在vscode里新建一个vue文件，在文件空白处输入vue ，按 Tab 键，即可生成完整的模板