Vue项目手动添加ESLint

前置条件：
公司的一个项目用 vue cli创建的时候，没有安装ESLint功能
项目进展到现在，所以需要添加ESLint功能，此篇文章就是记录该如何给一个Vue项目手动添加ESLint。
目标项目：一个没有ESLint的Vue项目
Demo项目：使用vue cli创建一个带有ESLint功能的项目

package.json

在Demo项目中package.json文件中找到 "devDependencies"中的

image.png

分别copy红色框1和红色框2，把他们粘贴到目标项目package.json文件中的位置

框1的千万不要漏掉！

执行 cnpm install

分别观察Demo项目和目标项目下的文件夹 node_modules
会发现Demo项目有如下的文件：

image.png

而目标项目没有。
这个时候在目标项目下执行cnpm install
完成后，也会有同样的文件了。
如果执行失败，那就删除整个node_modules

.eslintignore和.eslintrc.js

把Demo项目中的文件

.eslintignore
.eslintrc.js

copy到目标项目

config/index.js

image.png

把Demo项目中的红色框中的内容copy到目标项目的相关位置

build/webpack.base.conf.js

把Demo项目中的如下内容copy到文件中的相关位置

image.png

Demo项目中的rules红框内容1

image.png

目标项目中的rules红框内容2：

image.png

是一定要把内容2替换成内容1，不能把内容1直接粘贴在内容2上面，否则会出现意想不到的问题

这样最终就可以完成ESLint的功能的安装了。