VsCode中snippets --- vue自定义代码片段

vue自定义代码片段

• Vue2代码片段
• • 1、点击文件 → 首选项→选择配置用户代码片段
  • 2、在弹出这个窗口中选择新建全局代码片段文件
  • 3、选择后在此处输入文件名后按‘Enter’键确定
  • 4、点击确定后会生成以下文件
  • 5、替换成以下vue2代码片段
  • 6、使用代码片段
• Vue3代码片段
• • 使用defineComponent语法
  • 使用setup语法糖

场景：当我们手上有两个项目（vue2和vue3）时，初始化页面可以使用自定义的代码片段迅速生成，这样可以减少重复编码。

Vue2代码片段

1、点击文件 → 首选项→选择配置用户代码片段

2、在弹出这个窗口中选择新建全局代码片段文件

3、选择后在此处输入文件名后按‘Enter’键确定

4、点击确定后会生成以下文件

5、替换成以下vue2代码片段

里面的内容可以根据自己的需求删减一些不必要的结构！

{
	"Print to console": {
		"prefix": "vue2", //这里是定义快速呼起指定代码片段的名称
		"body": [
			"<template>",
			"  <div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data() {",
			"    return {",
			"",
			"    };",
			"  },",
			"  computed: {},",
			"  watch: {},",
			"  methods: {",
			"",
			"  },",
			"  created() {",
			"",
			"  },",
			"  mounted() {",
			"",
			"  },",
			"  beforeCreate() {},",
			"  beforeMount() {},",
			"  beforeUpdate() {},",
			"  updated() {},",
			"  beforeDestroy() {},",
			"  destroyed() {},",
			"  activated() {},",
			"  components: {},",
			"}",
			"</script>",
			"",
			"<style lang='less' scoped>", //less是css的预处理器 要根据你所选择的处理器来进行更改
			"$4",
			"</style>"
		],
		"description": "vue2代码片段"
	}
}

6、使用代码片段

在.vue文件输入vue后会自动弹出列表，自行选择要生成的代码片段

Vue3代码片段

大致步骤和上诉一致，只有代码片段内容不同

使用defineComponent语法

{
	"Print to console": {
		"prefix": "vue3",//使用vue3快速选择该代码片段
		"body": [
			"<template>",
			"$1", //默认光标
            "</template>",
            "<script>",
			" ",
            "import { defineComponent, getCurrentInstance, onMounted, onBeforeMount, reactive, toRefs } from 'vue'", 
            "export default defineComponent({",
				"name:'',",
				"props: { },",
				"emits:[],",
				"components: {", 
				" ",
				"},",
				"setup(props, ctx){",
					"const { proxy } = getCurrentInstance();",
					"const state = reactive({",
					" ",
					"})",
					"onMounted(() => {",
					" ",
					"})",
					"onBeforeMount(() => {",
					" ",
					"})",
					" ",
					"return {",
						"...toRefs(state),",
						" ",
					"}",
				"}",
			"})",
            "</script>",
            "<style scoped lang=\"scss\">", //根据项目中使用的语言动态填写lang的值
			" ",
            "</style>",
			" "
			],
			"description": "vue3的defineComponent语法代码片段"
	}
}

使用setup语法糖

{
	"Print to console": {
		"prefix": "v3-setup", //使用v3-setup快速选择该代码片段
		"body": [
			"<template>",
			"$1", //默认光标
			"</template>",
			"<script setup lang=\"ts\">",
			"import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue'",
			"const { proxy } = getCurrentInstance();",
			"const emits = defineEmits([])",
			"const props = defineProps({",
			" ",
			"})",
			"const state = reactive({",
			" ",
			"})",
			"onBeforeMount(() => {",
			" ",
			"})",
			"onMounted(() => {",
			" ",
			"})",
			"defineExpose({ state })",
			" ",
			"</script> ",
			"<style lang=\"scss\" scoped>", //根据项目中使用的语言动态填写lang的值
			" ",
			"</style>"
		],
		"description": "vue3的setup代码块"
	}
}