安装成功需手动确认：node_modules/element-ui/目录存在且package.json中dependencies含"element-ui"条目；若无反应，先切淘宝镜像再重装；样式路径必须为import 'element-ui/lib/theme-chalk/index.css'。
npm install element-ui -S 之后没反应？检查 node_modules 和 package.json
执行 npm install element-ui -S 后，终端没报错但也没明显输出，不代表安装失败。必须手动确认两点：
-
node_modules/element-ui/目录是否存在（注意大小写，不是ElementUI或elementui） -
package.json的dependencies中是否新增了"element-ui": "^2.15.14"类似条目（版本号可能不同）
如果缺失，大概率是 npm 源被墙或缓存异常。优先运行：npm config set registry https://registry.npm.taobao.org，再重装。不要依赖 WebStorm 内置 Terminal 的环境变量——它有时不继承系统配置，建议用系统 CMD/PowerShell 执行安装。
main.js 中 import 'element-ui/lib/theme-chalk/index.css' 报错：Cannot find module
这是最常踩的坑：Element UI v2.x 默认提供的是 theme-chalk 主题，但部分旧教程或镜像包里残留了 theme-default 路径。若报错提示找不到 index.css，立刻进 node_modules/element-ui/lib/ 看真实目录名。
- 99% 的情况是只有
theme-chalk/，没有theme-default/ - 路径写错会导致样式完全不生效，按钮变回原生 HTML 样式，但组件 JS 仍能渲染（容易误判为“引入成功”）
- 正确写法只能是：
import 'element-ui/lib/theme-chalk/index.css'，不能漏掉index.css，也不能写成css或style.css
按需引入时 babel-plugin-component 配置失效，el-button 仍无样式
按需引入不是只改 main.js 就完事。缺了 Babel 插件配置，Webpack 编译时根本不会处理 element-ui/lib/button 这类路径，最终仍会加载全量 CSS 和 JS。
- 必须安装插件：
npm install babel-plugin-component -D - 在
babel.config.js（不是.babelrc）中添加插件配置，且libraryName必须严格为"element-ui"（字符串，不可省略引号） - 确保
main.js中只引入用到的组件，例如：import { Button, Input } from 'element-ui'，然后调用Vue.use(Button)；不能混用全局引入（Vue.use(ElementUI)）和按需引入
WebStorm 中 npm run dev 启动后页面空白或控制台报 [Vue warn] Unknown custom element
这通常不是 Element UI 的问题，而是 WebStorm 的项目识别或 Vue 版本错配导致的：
- 检查
package.json中vue版本：Element UI v2.x 仅支持 Vue 2.x（^2.5.0），若你用的是 Vue 3，必须换element-plus - 确认 WebStorm 是否将项目根目录设为 Sources Root（右键目录 → Mark Directory as → Sources Root），否则
import路径解析可能出错 - 清空
node_modules和package-lock.json，重新npm install—— WebStorm 有时会缓存损坏的模块引用
真正麻烦的点在于：样式路径、Babel 插件、Vue 版本这三个地方只要一个不匹配，表现都是“组件标签存在但没样式/不渲染”，很难一眼定位。动手前先看 node_modules/element-ui/lib/ 下实际有什么，比查文档更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
