详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

下面是详解Webstorm 新建.vue文件支持高亮vue语法和es6语法的完整攻略：

问题描述

在使用Webstorm开发Vue项目的过程中，新建.vue文件后发现并没有默认支持高亮vue语法和es6语法，这给我们带来了不小的困扰，那么应该如何解决呢？

解决方案

安装Vue插件

为了支持高亮Vue语法和ES6语法，我们首先需要安装Vue插件，可以打开Webstorm并进入插件市场，在搜索框内输入“Vue”，然后点击安装，等待安装完成即可。

安装ESLint插件

为了使Vue支持ES6语法，我们需要安装ESLint插件，同样进入插件市场，搜索“ESLint”并安装。

配置解析.vue文件

在Webstorm的Preferences（Mac）/Settings（Windows）中找到 Languages & Frameworks > JavaScript ，在此设置中点击右侧的“Edit”按钮，进入JavaScript文件类型配置页面，点击“+”按钮，添加.vue文件类型，然后选择“Vue.js”，点击OK保存即可。

配置ESLint规则

打开前面安装的ESLint插件，我们需要在其中配置规则，来支持高亮显示ES6语法，打开Webstorm的Preferences（Mac）/Settings（Windows）并进入Languages & Frameworks > JavaScript > Code Quality Tools > ESLint页面，勾选“Enable”选项来启用ESLint，可以自定义Eslint的配置文件（.eslintrc），也可以选择使用默认配置，然后点击“OK”保存修改。

配置完成后，我们便可以新建一个.vue文件并写入Vue组件代码，可以看到高亮的Vue语法和ES6语法。

示例说明

以下是在Webstorm中新建一个.vue文件并使用ES6语法的示例：

<template>
  <div class="example">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'This is a example'
    }
  }
}
</script>

<style>
.example {
  font-size: 18px;
  color: #333;
}
</style>

在上面的示例中，我们使用了Vue组件模板、单文件组件的结构，并使用ES6的箭头函数语法定义了一个data属性来存储数据。这里我们可以看到，我们使用的所有Vue和ES6语法都被正确地高亮显示了。

这是完整的攻略，希望能够帮助到你。