jetbrains:vue.js相关模板

单文件组件模板

file>settings>editor>file and code templates

  1. 点击加号


    点击加号
  2. 输入自己需要的
  • 命名(待会会出现你的配置的名称)
  • Extension(文件类型)
    我们在这里设置了
    name:all-options of Vue Single File Component
    extension:vue
    意为:选择all-options of Vue Single File Component新建一个 *.vue类型的类型的文件。
  1. 配置内容

配置模板在此

<template>
  <div>
    #[[$END$]]#
  </div>
</template>

<script>
export default {
  //* **************   组件的选项/数据 start **************** *//
  name: "${FILE_NAME}",
  // 组件内部数据:方法
  data () {
    return {}
  },
  // 组件传递属性:对象||数组
  props: {},
  // 计算属性:对象
  computed: {},
  // 组件方法:对象
  methods: {},
  // 组件监听器:对象
  watch: {},
  //* **************   组件的选项/数据 end **************** *//

  //* **************   组件的选项/资源 end **************** *//
  // 自定义可用组件,如果你要用组件,且组件没有全局引入,就需要import进入后,再声明出来。
  components: {},
  // 自定义指令
  directives: {},
  // 自定义过滤器
  filters: {},
  //* **************   组件的选项/资源 end **************** *//

  //* **************   组件的选项/生命周期钩子 start **************** *//
  // 应用实例 初始化之后 在数据观测和event/watcher之前调用
  beforeCreate () {
  },
  created () {
  },
  beforeMount () {
  },
  mounted () {
  },
  beforeRouteUpdate () {
  },
  updated () {
  },
  activated () {
  },
  deactivated () {
  },
  becomponentsforeDestroy () {
  },
  destroyed () {
  },
  errorCaptured (err, vm, info) {
  }
  //* **************   组件的选项/生命周期钩子 end **************** *//
}
</script>

<style scoped>

</style>

  1. 你也可以根据本模板来修改常用的
    例如:
  mounted(){
    this.$axios.fetch(url,()=>{
      })
  // balabala…………
  }
  1. 新建模板

项目左侧project区域,右键选择


新建vue模板文件

就可以新建我们常用的vue组件模板了
新建之后的效果如下:

单文件组件效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容