webstorm为Vue设置Live Templates

webstorm为Vue设置Live Templates

                                                             --太过香会沉醉

第一步：写好vue模板

<div id="app">
  {{ message }}
</div>
<script src="../js/vue.js"></script>
<script>
  const  app = new Vue({
    el: '#app',
    data:{
      message: '你好！'
    }
  })
</script>

第二步：设置Live Templates

1.打开File-->Settings

2.选择Live Templates，点击Vue，再点击+，选择1.Live Templates

3.在Template text中复制粘贴好刚才建立的vue模板，如图所示的序号进行添加。最后点击Define，选择HTML。然后点击Apply-->OK即可完成

4.建立新的页面，输入vue并按tab键即可出现写好的vue模板