WebStorm 在Settings → File and Code Templates中 自定义一个用于创建Vue2.0的模板。

WebStorm 自定义创建Vue2.0的模板。要求name为输入的文件名${NAME}；<template>下的唯一元素<div> 的class为${NAME}的驼峰转中划线格式，例如：${NAME}为testVueAbc的话，class就是 test-vue-abc。
并为这个模板生成一段简短的Description。

以下是Vue2.0模板的设置步骤：

1. 打开WebStorm，进入Settings（Windows/Linux为File → Settings，Mac为WebStorm → Preferences）。

2. 在左侧栏中选择File and Code Templates。

3. 在顶部的Tabs中选择Includes，然后在文件列表中找到Vue Component。

4. 在Vue Component文件中，复制整个模板代码，并粘贴到下方的Template text框中。

5. 修改模板代码，确保满足以下要求：

<template>
  <div class="${NAME.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase()}">
    
  </div>
</template>

<script>
  export default {
    name: '${NAME}',    
  }
</script>

• 模板的name属性为${NAME}，表示文件名
• div的class为${NAME}的驼峰转中划线格式

1. 在Description中输入简短的模板描述，例如：Vue2.0单文件组件模板。

2. 点击Apply，保存模板设置。

现在，每次创建Vue2.0单文件组件时，WebStorm都会使用这个自定义模板，以便快速创建Vue组件。