实用的Vue2.x与Vue3.x的代码片段

1,028 阅读1分钟
{
	"vue2-template": { //模板名称
		"prefix": "vv", //触发条件
		"body": [ //内容
			"<!--",
			"* @description  ${1:参数1}",
			"* @fileName  ${TM_FILENAME_BASE}",
			"* @author userName",
			"* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"* @version V1.0.0",
			"!-->",
			"",
			"<template>",
			"  <div id='${TM_FILENAME_BASE}'>",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '${TM_FILENAME_BASE}',",
			"  data () {",
			"    return {",
			"",
			"    }",
			"  },",
			"  created () { // 实例被创建之后执行代码",
			"",
			"\t},",
			"  computed: { // 计算属性",
			"",
			"\t},",
			"  components: { // 组件的引用",
			"",
			"\t},",
			"  methods: { // 方法",
			"",
			"\t},",
			"  mounted () { // 页面进入时加载内容",
			"",
			"\t},",
			"  watch: { // 监测变化",
			"",
			"\t}",
			"}",
			"</script>",
			"<style lang='scss'>",
			"",
			"</style>"
		],
		"description": "vue代码片段" //描述
	},
	"vue3-template": {
		"prefix": "vvv",
		"body": [
			"<!--",
			"* @description  ${1:参数1}",
			"* @fileName  ${TM_FILENAME_BASE}",
			"* @author userName",
			"* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"* @version V1.0.0",
			"!-->",
			"",
			"",
			"<template>",
			"  <div id='${TM_FILENAME_BASE}'>",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"import { defineComponent } from 'vue'",
			"export default defineComponent({",
			"  name: '$TM_FILENAME_BASE',",
			"  setup() {",
			"    return {",
			"",
			"    }",
			"  },",
			"})",
			"</script>",
			"",
			"<style lang='scss'>",
			" ",
			"</style>",
			""
		],
		"description": "vue3 template"
	},
}