WebStorm创建Vue的template(模板)

WebStorm快速生成Vue模版

CSDN机制问题导致图片丢失，可查看本人博客：WebStorm快速生成Vue模版

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KzoItXx-1651248708176)(https://cdn.jsdelivr.net/gh/Jonny-Chi/picgo_imgs/BLog/202204292357510.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VImcSg8-1651248708179)(https://cdn.jsdelivr.net/gh/Jonny-Chi/picgo_imgs/BLog/202204292359274.png)]

Mac用户

1. WebStorm ➡️ Preferences
2. 选择Editor
3. 找到LiveTemplates
4. 下滑找到Vue
5. 点击右边的➕，选择Live Template
6. Abbreviation（快捷键缩写）：可以写vue也可以自定义
7. Template text（模版文本）
8. Define（作用视图）：选择Vue

Windows用户

1. 打开settings
2. 选择Editor
3. 找到LiveTemplates
4. 下滑找到Vue
5. 点击右边的➕，选择Live Template
6. Abbreviation（快捷键缩写）：可以写vue也可以自定义
7. Template text（模版文本）
8. Define（作用视图）：选择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>