idea 安装设置开发vue项目环境（最全）

• 安装vue.js插件（目的：识别后缀名为vue的文件）

   1.打开idea 选择左上角 File  ===> Settings 

   2.安装插件vue.js

说明：重启idea 插件即可生效。

• idea支持ES6脚本规则开发

   1.打开idea 选择左上角 File  ===> Settings 

   2.选择该选项支持ES6开发

说明：vue是支持ES6写法的，所以这边设置ES6，这样写js脚本的时候不会报错。

• idea设置import @格式，导入脚本支持跳转

  1.新建脚本名称自定义 例如：alais-config.js 复制下方代码 （注意：让这个文件位置与package.json这个文件同级）

    如图所示

/* 此文件未使用，只是为了让idea可以识别实际位置 */
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

说明：此文件只是为了让idea可以识别实际位置。

  2.idea识别设置

  打开idea 选择左上角 File  ===> Settings  选中你新建的脚本

 

• 终端运行

说明：该地方运行命令即可。

• idea格式化代码报错解决

本人开发经常使用 idea快捷键  ctl+shift+L 格式化代码，开发vue过程中发现格式化会出现爆红。如下图

解决办法如下

首先找到.eslintrc.js文件
在rules下面添加一下代码

"space-before-function-paren":"off",//取消函数前的空格
"object-curly-spacing":"off",//取消括号内的间距一致
'indent': 'off',//取消对每行前空格的检测（该换行还是要换的）

就可以轻松解决了。