在 Vue 项目中，使用 ESLint 进行代码规范校验是一种非常好的方法。然而，在校验 Vue 文件中 JS 部分时可能会遇到一些问题，其中一种比较常见的就是在 Export Default 的时候会报错。
下面将结合实际代码，详细讲解这个问题的原因和解决方案。
问题重现
首先，让我们看看一个简单的 Vue 组件代码：
----------
---- --------------
------ --- -------
------
-----------
--------
------ ------- -
----- --------
------ -
------ -
---- -------- -- ---- ------ ----
-
-
-
---------
------ -------
-- -
---------- ----
----------- -------
-
--------这个组件实现了一个简单的功能：在页面上显示一段提示信息。
然而，当我们使用 ESLint 对这份代码进行校验时，就会得到一个错误提示：
----- ------- ------ --- ------- -------- -- -------- ------
这是为什么呢？我们知道，在 ES6 中，我们经常使用 export default 来输出一个默认的模块。但是，为什么 ESLint 在 Vue 文件中会认为 export default 是一个错误的关键字呢？
解决方案
其实，根据 Vue 官方文档的描述，我们可以知道，使用 ESLint 对 Vue 项目进行代码校验时，应该使用 eslint-plugin-vue 这个插件。
因此，我们需要先安装这个插件：
--- ------- ----------------- ----------
然后，在 .eslintrc.js 中配置这个插件：
-------------- - -
-------- -
-----
-
-好了，现在我们来执行一遍 ESLint。发现问题还是存在，怎么办呢？
又从 Vue 官网的介绍中得知，ESLint 的 vue/xxx 规则是我们在 .eslintrc.js 文件中需要配置的一些规则，其中，vue/require-default-prop 这个规则是要求 Vue 文件中必须有 default 属性的。
好的，那么现在我们需要在 .eslintrc.js 中进行如下配置：
-------------- - -
-------- -
-----
--
------ -
--------------------------- -
-
-然后，再次执行 ESLint，发现错误已经消失了，完美！
解决方案详解
到这里，相信大家都已经了解了如何处理这个报错问题。但是，我还是想再进一步深入讲解一下这个问题的一些细节。
首先，我们需要明确一点，那就是，在 Vue 文件中， export default 虽然看起来是 ES6 中的语法，但是它实际上是一个 Vue 对象的定义，而不是一个 JS 模块。
其次，我们需要知道，在 Vue 组件中，我们可以通过 props 属性来定义组件的输入参数。而 require-default-prop 这个规则就要求我们在这个属性中定义一个 default 属性。这样，在外部调用组件时，如果没有传入 props，那么就会使用 default 属性中定义的值。
而针对我们的这个问题，eslint-plugin-vue 插件默认是开启了 vue/require-default-prop 这个规则的，这也是导致我们在 ESLint 校验 Vue 文件中的 JS 代码时会出现 export default 报错的原因。
因此，我们需要通过在 .eslintrc.js 中进行规则配置，将这个规则关闭掉，从而让 ESLint 通过我们的 Vue 组件代码。
总结
本文针对在 ESLint 校验 Vue 文件中 JS 代码时出现的 Export Default 报错问题，详细解析了其原因和解决方案，并给出了实际代码作为示例。
相信本文能够帮助大家更好地理解 Vue 组件和 ESLint，在日常开发中更加高效地开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e04d55f6b2d6eab3b62c92