vue如何快速创建单文件组件（类似react的rcc操作）? || vue自定义代码块！

创建Vue代码片段

1.code -> 首选项 -> 用户片段

2.输入 vue -> 选择 vue.json

如果没有 vue.json，就选择如图所示 第一个文件

3.自定义所需要的模版

需要注意一下几点：

• 所有代码片段都只在.vue文件中才生效
• 一个代码片段对应 JSON 对象的一个属性
• 单个代码片段自身也是一个 JSON 对象，包含prefix、body、description等属性 代码片段的语法也很简单：
• prefix表示识别符（前缀），编辑器会根据识别符的输入插入代码片段body中的内容
• body表示最终插入到文档中的代码内容
• description是注释，便于日后翻看和维护

贴一下我配置的代码

{
	"Print to console": {
		"prefix": "!vue",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"<script>",
			"export default {",
			"  name: '',",
			"  components: {},",
			"  props: [],",
			"  data () { ",
			"  return { ",
			"     params: '' ",
			"  }",
			"},",
			"  created () {},",
			"  mounted () {}",
			"}",
			"</script>",
			"<style lang='scss' scoped>",
			" ",
			"</style>"
			
		],
		"description": "Log output to console"
	}
}

4.创建 .vue文件，使用指令

输入 !vue

选择第一个,即会输出你之前的配置

至此,快捷指令就配置完毕，可以愉快的写代码啦！！！

---

---

---

示例
更新第二版
在vue3出来之前，vue代码块直接输出就OK。

但是在vue3面世之后，输出代码块的时候就要区分是输出vue2的还是vue3的。

博主稍微更新了一下代码块设置，设置方式依旧和之前一样
仅供参考：

{
  "vue2-template": {
    "prefix": "vv",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "<script>",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "  data() {}",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
    ],
    "description": "Vue2模板"
  },
  "vue3-template": {
    "prefix": "vvv",
    "body": [
      "// namespace: \"$TM_FILENAME_BASE\" ",
      "<template>",
      "  <div>{{ name }} -- {{ sex }} -- {{ address }}</div>",
      "</template>",
      "<script>",
      "import { reactive, ref, toRefs } from \"vue\";",
      "export default {",
      "  name: \"$TM_FILENAME_BASE\",",
      "  setup() {",
      "    const data = reactive({ name: \"狂战士\", sex: \"男\", address: \"阿拉德大陆\" });",
      "    return { ...toRefs(data) };",
      "  }",
      "};",
      "</script>",
      "<style lang=\"scss\" scoped>",
      "</style>"
    ],
    "description": "Vue3模板"
  }
}

输入 vv，输出vue2代码块。

输入 vvv，输出vue3代码块。

需要注意：
需在vue3.X的版本里才能正常使用展示vue3的代码块，否则页面不会正常的展示数据！

更多配置，请查看：
【全局代码块配置】