Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

在webstorm里面进行vue文件的编辑时，并没有高亮提醒，所以进行相关的配置。

1、首先在编辑器>设置>Plugins >vue.js 进行vue.js插件安装。
完成之后进行编辑器的重启。
2、打开编辑器，在设置>编辑器>文件和代码模板 进行vue.js的模板编辑

点击加号：

空白区写入默认的模板：

<!-- 展示模板 --><template>  <div id="app">    <img src="./assets/logo.png">    <hello></hello>  </div></template><script>// 导入组件import Hello from './components/Hello'export default {  name: 'app',  components: {    Hello  }}</script><!-- 样式代码 --><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

进行应用保存。

3、进行vue文件改成html 文件，这样编辑器就支持高亮vue的语法

4、有些不支持es6语法，所以在编辑器进行设置

也可以 直接在