前端 - 为什么vue2项目pnpm install后，element ui的html标签都是会提示“未知 HTML 标记 el-”？

Question

看解答都是说“node_modules中的element-ui文件右键，「将目录标记为」-「不排除」“但感觉这不是长久的解决办法，一个项目安装完依赖之后，每次都需要手动不排除吗？这里的不排除是什么意思？有没有办法让用到的标签自动关联上呢？

Answer 1

您的问题是关于 Vue2 项目中使用 Element UI 时的 HTML 标签提示问题。出现 "未知 HTML 标记 el-" 的提示通常是因为 Vue.js 在解析 HTML 模板时无法识别到 Element UI 提供的自定义组件。这可能是因为 Element UI 的组件没有被正确地加载或者注册。

当您在 Vue.js 项目中安装并使用 Element UI 时，需要确保正确地导入和注册了 Element UI。通常，您需要在 main.js 或者类似的入口文件中导入 Element UI，并使用 Vue.use() 方法来注册：

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

如果您已经正确地进行了上述操作，但仍然出现 "未知 HTML 标记 el-" 的提示，那么可能是由于某些未知的冲突或者问题导致的。这时候，您可能需要尝试以下方法：

1. 清除 node_modules 文件夹和 package-lock.json 文件，然后重新运行 pnpm install 命令。有时候，这可以解决一些未知的依赖问题。
2. 在您的代码中，检查是否正确地使用了 Element UI 的组件。例如，如果您想在 HTML 中使用 Element UI 的 el-button 组件，您应该这样写：

<el-button type="primary">Click me!</el-button>

而不是：

<button type="primary">Click me!</button>

3. 检查您的代码中是否正确地引用了 Element UI。在 Vue.js 中，您需要使用 import 语句来引入 Element UI，并使用 Vue.use() 方法来注册。如果您没有这样做，那么 Element UI 就不会被正确地加载和注册。
4. 如果以上方法都无法解决问题，那么您可以尝试使用不同的 HTML 解析器，例如 tidy。在 pnpm install 命令后，使用以下命令来安装 tidy：

pnpm add tidy --save-dev

然后在 main.js 文件的开头添加以下代码：

import tidy from 'tidy';global.HTMLTidy = tidy;

希望这些方法可以帮助您解决问题。如果问题仍然存在，那么可能需要更详细地检查您的代码和配置文件。