前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用vs code自动生成vue2.0初始化模板

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

作者头像
江咏之
发布2022-06-16 11:44:11
4930
发布2022-06-16 11:44:11
举报
文章被收录于专栏:技术社区

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

复制以下代码,保存

代码语言:javascript
复制
{
	"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模板"
	}
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档