Webstorm中配置Vue开发环境详解

Vue学习笔记1-windows系统搭建VUE环境我们用vue-cli创建好一个项目，如果我们使用Webstorm作为编码工具，会发现代码中有很多编辑器警告，这是因为默认情况下Webstorm对Vue项目的支持不够造成的，为提高编程效率还要进行一些配置。
我的Webstorm版本是2018，配置方法如下：

1、安装Vue.js插件，使Webstorm能够识别Vue文件

在Webstorm的File菜单中选择Settings（快捷键：Ctrl+Alt+S）,调出Settings窗口，点击Plugins，在输入框输入vue，将查找到Vue.js插件，安装即可。
安装后Webstorm会重新启动，再看配置是这样的：

完成这个配置后，Vue文件高亮显示

2、设置Vue新建文件模板

在设置面板中，可以Editor>File and Code Templates添加和修改创建文件格式和模板，实际上安装Vue.js插件后会默认新增一个模板，可以根据需要修改和新增其他模板

3、WebStorm添加ES6支持

vue 使用的是es6语法， 所以要将javascript的版本改成es6。

4、设置vue文件支持的编码格式（Code Style）

在Code Style中没有Vue,那么设置Other File Types的缩进为2

5. 让webstorm识别wepback项目别名@

webpack构建的vue项目中，经常会用到别名alias，别名用于简化路径的写法，vue-cli创建的项目会自动在build/webpack.base.conf.js文件中配置别名@，代表项目的src目录

webstorm不能自动识别别名，虽然不会报错，但会出现波浪线提示你"Module not installed"，更加不会有自动补全功能
通过下面的配置，可以解决这两个问题
1、在项目根目录新建文件webstorm.config.js

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, "src"),
    }
}

2、在settings/languages&framworks/javascript/webpack中指定刚才的配置文件

7. 关闭Eslint代码检查

如果需要Eslint代码检查，需要两步
1、vue项目中 bulid > webpack.base.conf.js注释掉

2、在webstorm中取消编辑器代码校验