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

╰+攻爆jí腚メ 2023-02-09 13:26 4阅读 0赞

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

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

2.安装插件vue.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70][]

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

*  idea支持ES6脚本规则开发

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 1][]

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

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

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

如图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 2][]

/* 此文件未使用，只是为了让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  选中你新建的脚本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 3][]

*  终端运行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 4][]

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

*  idea格式化代码报错解决

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 5][]

解决办法如下

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

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

就可以轻松解决了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519092316450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200519092508364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200519093241839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200519093025898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200519093725775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200521092244571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70