使用vs code自动生成vue2.0初始化模板

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

复制以下代码,保存

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

posted @ 2021-10-19 15:26  江咏之  阅读(160)  评论(0编辑  收藏  举报