Vscode通过vue指令生成vue模板页面

Vscode通过vue指令生成vue模板页面

查找vue.json

通过文件=》首选项=》用户代码片段
在这里插入图片描述
输入vue.json,找到vue.json
输入一下模板

{
	// Example:
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"   <div>$0</div>",
			"</template>",
			"",
			"<script>",
			"//这里可以引入其他文件(比如组件,工具js,第三方插件js,json文件,图片文件等等)",
			"//列如:import <<组件名称>> from '《组件路径》';",
			"export default {",
			"//import引入的组件需要注入到对象中才能使用",
			"   components: {},",
			"   props: {},",
			"   data() {",
			"//这里存放数据",
			"       return {",
			"       };",
			"   },",
			"//监控data中的数据变化",
			"   watch: {},",
			"//计算属性,类似于data概念",
			"   computed: {},",
			"//方法集合",
			"   methods: {},",
			"//生命周期,创建完成(可以访问当前this实例)",
			"   created() {},",
			"//生命周期,挂载完成(可以访问dom元素)",
			"   mounted() {},",
			"   beforeCreate(){},//生命周期-创建之前",
			"   beforeMount(){}, //生命周期 - 挂载之前",
			"   beforeUpdate(){}, //生命周期 - 更新之后",
			"   updated(){}, //生命周期 - 更新之后",
			"   beforeDestroy(){}, //生命周期 - 销毁之前",
			"   destroy(){}, //生命周期 - 销毁完成",
			"   activated(){}, //如果页面有keep-alive缓存功能,这个函数会触发",
			"};",
			"</script>",
			"<style scoped>",
			"</style>"
		],
		"description": "A vue file template"
	}
}

测试下,新建一个vue页面输入vue,回车

<template>
   <div></div>
</template>

<script>
//这里可以引入其他文件(比如组件,工具js,第三方插件js,json文件,图片文件等等)
//列如:import <<组件名称>> from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
   components: {},
   props: {},
   data() {
//这里存放数据
       return {
       };
   },
//监控data中的数据变化
   watch: {},
//计算属性,类似于data概念
   computed: {},
//方法集合
   methods: {},
//生命周期,创建完成(可以访问当前this实例)
   created() {},
//生命周期,挂载完成(可以访问dom元素)
   mounted() {},
   beforeCreate(){},//生命周期-创建之前
   beforeMount(){}, //生命周期 - 挂载之前
   beforeUpdate(){}, //生命周期 - 更新之后
   updated(){}, //生命周期 - 更新之后
   beforeDestroy(){}, //生命周期 - 销毁之前
   destroy(){}, //生命周期 - 销毁完成
   activated(){}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值