webstrom创建vue文件的时候自动按照vue模板创建

需求

在创建vue文件的时候,会自动创建一下的模板文件

[collapse title="vue默认模板" status="false"]

<template>

</template>

<script>
export default {
  name: "info"
}
</script>

<style scoped>

</style>

[/collapse]

但是我们常用的方法并没有列出

[collapse title="常用的" status="false"]

  data(){

  },
  methods:{

  },
  mounted() {
    
  }

[/collapse]

具体设置

打开 webstromSetting,然后找到 File and Code Template,直接搜索 Template就可以找到。

webstrom创建vue文件的时候自动按照vue模板创建插图

然后在桌面的文件列表类型中找到 vue Single File Component,一般来说是这个名字,如果不是,只要是VUE模板就可以,再如果里面压根没有这个类型的模板文件,就点击页面中的 + 号,创建下图中的内容,具体的模板内容还是下面的 完整模板代码文件

webstrom创建vue文件的时候自动按照vue模板创建插图1

我们需要一个模板代码,首先看看官方模板中的样子

[collapse title="官方模板代码" status="false"]

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

<script>
export default {
name: "${COMPONENT_NAME}"
}
</script>

<style scoped>

</style>

[/collapse]

我们在这个基础上作个修改即可,所以完整的模板代码如下,可以按照需求自行修改

[collapse title="完整模板代码" status="false"]

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

<script>
export default {
  name: "${COMPONENT_NAME}",
  data(){
    return{
      
    }
  },
  methods:{

  },
  mounted() {

  }
}
</script>

<style scoped>

</style>

[/collapse]

效果

我们通过webstrom创建 .vue文件之后,效果如下

webstrom创建vue文件的时候自动按照vue模板创建插图2

版权声明:
作者:北忘山
文章:webstrom创建vue文件的时候自动按照vue模板创建
链接:https://www.beiwangshan.com/archives/114.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>