webstrom2020如何添加模板

说明：

对于模板，其实就是一坨代码，然后把这坨代码起个名字，当我们在特定类型的文件中输入该名字之后，点击tab键就可以在文件中键入这坨代码了

操作：

接下来我定义一些vue模板，里面包含了引入vue.js的代码和vue最基本的脚本，还有一个最基本的div，复制你需要定义模板的代码，我的模板代码如下（复制你自己的，别复制成我的了呢）：

<div id="app">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

之后点击File——》Settings——》Editor——》Live——》Live Templates，在右边的框框中找到你你添加的模板属于哪类文件，例如我的就属于Vue模板，那我就寻找Vue就是了，如下：

如果上面的模板类型都没有你需要的，你可以自己定义，只需要点击框框右上角的+——》点击2.Template Groups…，如下图：

在弹出的文本框中输入你需要的模板类型名称，例如MyTemplate，点击OK就可以了，如下图：

接下来我说一下如何添加模板代码，选中你需要的模板类型名称，然后点击框框右上角的+——》点击1.Live Template，如下图：

输入模板标签名称、模板标签描述、模板内容，如下图：

选择在哪些文件类型上使用模板，由于我的是在html文件中使用的，所以我首先点击Define，然后勾选HTML，之后点击Apply和OK就可以了，如下图：

使用：

由于上面我定义的模板名称是vue，所以我直接在html文件中输入vue（你输入自己的模板名称），点击tab键就可以导入模板了，如下图：