VSCode快速生成Vue模版

Mac用户

​ Code ➡️ 首选项 ➡️ 用户片段 ➡️ 新代码片段 ➡️vue

​ 清空内容，输入模板

Windows用户

​ 文件 ➡️ 首选项 ➡️ 用户代码片段 ➡️新代码片段 ➡️vue

​ 清空内容，输入模板，具体格式如下（可根据自己的喜好进行修改）

Vue3.x模版

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

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {}
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this 实例）
  setup () {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  onMounted () {
  },
  onBeforeMount () {
  }, // 生命周期 - 挂载之前
  onBeforeUpdate () {
  }, // 生命周期 - 更新之前
  onUpdated () {
  }, // 生命周期 - 更新之后
  onBeforeUnmount () {
  }, // 生命周期 - 销毁之前
  onUnmounted () {
  }, // 生命周期 - 销毁完成
  onErrorCaptured () {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped>
</style>

Vue2.x模「如果认可的话可以用我写的这个模版」

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

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {}
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {
  },
  beforeCreate (){
  },
  beforeMount () {
  }, // 生命周期 - 挂载之前
  beforeUpdate () {
  }, // 生命周期 - 更新之前
  updated () {
  }, // 生命周期 - 更新之后
  beforeDestroy () {
  }, // 生命周期 - 销毁之前
  destroyed () {
  }, // 生命周期 - 销毁完成
  activated () {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped>
</style>

新建vue文件，输入vue按Enter键模板代码就出来了。