WebStorm快速生成Vue模版

Webstorm 提供了常用的预定义模板变量,用户名,项目名称,时间,年,月,日等

  • ${PROJECT_NAME} - 当前项目的名称

  • ${NAME} - 在创建文件期间在新建文件对话框中指定的文件名称

  • ${USER} - 系统的当前用户登录名称

  • ${DATE} - 当前系统日期

  • ${TIME} - 当前系统时间

  • ${YEAR} - 当前年份

  • ${MONTH} - 当前月份

  • ${DAY} - 当前月的日期

  • ${HOUR} - 当前时刻

  • ${MINUTE} - 当前分钟

  • ${PRODUCT_NAME} - 将被创建文件所在的 IDE 名称

  • ${MONTH_NAME_SHORT} - 月份名称的前 3 个字母,例如: Jan, Feb, etc.

  • ${MONTH_NAME_FULL} - 月份全称,例如: January, February, etc.

 下面是Vue2.x模板(可以根据自己的需求设置)

<template>
  <div>

  </div>
</template>

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

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

<style scoped>
</style>

下面是Vue3.x模板(可以根据自己的需求设置)

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

<script>
// 这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json 文件,图片文件等等)
// 例如:import  《组件名称》  from '《组件路径》 ';
import {ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated} from 'vue'
export default {
  name: "${NAME}",
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // setup在beforeCreate之前执行一次,this是undefined。
  setup() {

    onBeforeMount(()=>{})// 生命周期 - 挂载之前
    onMounted(()=>{})// 生命周期 - 挂载完成(可以访问 DOM 元素)
    onBeforeUpdate(()=>{})// 生命周期 - 更新之前
    onUpdated(()=>{})// 生命周期 - 更新之后
    onBeforeUnmount(()=>{})// 生命周期 - 销毁之前
    onUnmounted(()=>{})// 生命周期 - 销毁完成
    onErrorCaptured((err)=>{})// 当事件处理程序或生命周期钩子抛出错误时
    onRenderTracked((e)=>{})// 渲染的时候可以追踪到
    onRenderTriggered((e)=>{})// 重新渲染的时候触发
    // 如果页面有 keep-alive 缓存功能,这个两个函数会触发
    onActivated(()=>{})//进入的时候触发
    onDeactivated(()=>{})//离开的时候触发
    return{//组件中使用的变量和绑定的方法都需要return才能使用

    }
  },
}
</script>

<style scoped>
</style>

Logo

前往低代码交流专区

更多推荐