webstorm设置新建vue文件的模板

Webstorm 添加新建文件类型

以创建 Vue 文件为例:

  File—Setting—Editor—File and Code Template 分支,点击添加,依次输入 Name 和 Extension,OK 即可。如图:

webstorm设置新建vue文件的模板

Webstorm 创建文件模板

  Webstorm 新建文件过程中现在文件头部加入创建时间,作者信息,项目名称,需要用到修改默认的模板,即上一步,模板代码:

<!--
  文件描述:
  创建时间:${DATE} ${TIME}
  创建人:${USER}
-->
<template>
  <div class="">

  </div>
</template>

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

export default {
  name: '${COMPONENT_NAME}',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成(可以访问当前this实例)
  created () {

  },
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted () {

  },
  beforeCreate () {
  }, // 生命周期 - 创建之前
  beforeMount () {
  }, // 生命周期 - 挂载之前
  beforeUpdate () {
  }, // 生命周期 - 更新之前
  updated () {
  }, // 生命周期 - 更新之后
  beforeDestroy () {
  }, // 生命周期 - 销毁之前
  destroyed () {
  }, // 生命周期 - 销毁完成
  activated () {
  } // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>

<style scoped lang="scss">
  //@import url(); 引入公共css类
</style>

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.

本资源由随笔博客发布。发布者:五维国度,转载请注明出处:http://blog.suibi.site/archives/4271


本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

(0)
上一篇 2022年 11月 28日 下午3:23
下一篇 2022年 12月 1日 下午2:22

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询: QQ交谈

邮件:jctestxcx@163.com

关注微信