需求

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

<template>

</template>

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

<style scoped>

</style>

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

常用的

  data(){

  },
  methods:{

  },
  mounted() {
    
  }

具体设置

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

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

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

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

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

官方模板代码

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

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

<style scoped>

</style>

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

完整模板代码

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

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

  },
  mounted() {

  }
}
</script>

<style scoped>

</style>

效果

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

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

如果觉得我的文章对你有用,请随意赞赏