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',//取消对每行前空格的检测（该换行还是要换的）

就可以轻松解决了。

---

博主新推出的gitee免费开源项目（商城+APP+小程序+H5），有兴趣的小伙伴可以了解一下。

生鲜商城kxmall-小程序 + App + 公众号H5: kxmall-生鲜商城+APP+小程序+H5。同时支持微信小程序、H5、安卓App、苹果App。支持集群部署，单机部署。可用于B2C商城，O2O外卖，社区超市，生鲜【带配套骑手端配送系统】。kxmall使用uniapp编码。使用Java开发,SpringBoot 2.1.x框架，MyBatis-plus持久层框架、Redis作为缓存、MySql作为数据库。前端vuejs作为开发语言。https://gitee.com/zhengkaixing/kxmall

• 阿里云折扣场：点我进入  
• 腾讯云秒杀场：点我进入