本文共 628 字，大约阅读时间需要 2 分钟。

一,前言

这篇介绍如何配置IDE支持Vue项目,开发工具IDE:webStorm

二,配置IDE支持ES6

脚手架项目虽然可以正常运行,但项目目录下文件存在很多报错

需要配置IDE对ES6的支持

进入Setting设置Languages&Frameworks/JavaScript,配置为支持ES6

应用修改后,报错消失

三添加对.vue文件的支持和创建

1)WebStorm安装Vue插件:

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

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

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

示例模板:

3)配置完成后,可以新建.vue格式文件:

四,添加Vue语法高亮

此时v-on,v-bind等vue语法仍显示为红色,但不影响代码运行

1)Preferences -> Editor -> Inspections 找到XML，把 Unbound XML namespace prefix的勾去掉2)或使用对应的语法糖写法:@和:(冒号)

五,结尾

通过以上设置,IDE已经支持了Vue项目,下一篇介绍.vue文件以及简单介绍脚手架工程如何组织并显示出HelloWorld页面