1,WebStorm安装Vue插件,使WebStorm拥有新建.vue文件功能:

安装完成后根据提示重启webstorm

2,Preferences->Editor->File and Code Templates添加创建文件格式和模板

点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,
下面还可以自定义.vue文件生成时的初始化模板内容

示例模板:

<template lang="html">
    <div>
    </div>
</template>

<script lang="babel">
    export default {
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss">
</style>

配置完成后,即可以新建.vue拓展名的文件了:

3,WebStorm添加vue语法高亮

4,WebStorm添加ES6支持

此时v-on等vue语法仍显示为红色,单不影响代码运行
可以通过以下方法取消红色
Preferences -> Editor -> Inspections
找到XML，把 Unbound XML namespace prefix的勾去掉