在index.html中引入Element UI需严格满足三前提：①Vue必须在Element UI前加载；②element-icons.woff/ttf须手动部署至fonts目录；③Vue实例必须挂载到已存在的DOM节点上，否则白屏、图标缺失、组件不渲染。
直接在 index.html 里用 <script></script> 和 <link> 引入 Element UI 是可行的，但必须严格满足加载顺序和资源完整性两个前提，否则页面白屏、组件不渲染、图标缺失、控制台报错（比如 Cannot read property 'prototype' of undefined）都是大概率事件。
引入顺序不能错：Vue 必须在 Element UI 之前
Element UI 是 Vue 的插件，依赖 Vue.prototype 扩展。如果 element-ui/lib/index.js 先执行，而 vue.js 还没加载完，就会抛出 Cannot read property 'prototype' of undefined 错误。
- ✅ 正确顺序（写在
或底部都行，但顺序不能变）：<script src="vue.js"></script><script src="element-ui/lib/index.js"></script><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> - ❌ 错误示例：把
element.js放在vue.js前面，或用async/defer打乱执行时序 - ⚠️ 注意：CDN 地址建议锁定版本，例如
https://unpkg.com/element-ui@2.15.14/lib/index.js，避免因默认指向最新版导致兼容性问题（Vue 2.x 项目别用 Element Plus）
图标字体文件（fonts）必须手动部署
Element UI 的按钮、表单、日期选择器等组件大量使用自定义图标（如 <i class="el-icon-search"></i>），这些图标由 element-icons.woff 和 element-icons.ttf 提供。CSS 文件里写的路径是 fonts/element-icons.woff，但本地引用时不会自动解析 node_modules 结构。
- ✅ 正确做法：下载这两个字体文件，放进你项目中 CSS 文件同级的
fonts/目录（例如css/fonts/element-icons.woff） - ❌ 只引了
index.css却没放字体文件 → 图标显示为方块或空白 - ? 验证方式：打开浏览器开发者工具，切到 Network 标签页，筛选
font，看是否有 404；再检查 Elements 中图标元素的font-family是否为element-icons
Vue 实例必须挂载且 el 选择器能匹配到 DOM
Element UI 组件（如 <el-button></el-button>）不是纯 HTML 标签，它们需要被 Vue 编译并挂载到真实 DOM 上。只写标签不创建实例，页面上什么都不会发生。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须有且仅有一个根容器，且在
new Vue({ el: '#app' })之前已存在于 HTML 中：<div id="app"><el-button>点我</el-button></div> - ❌ 写了
<el-button></el-button>但没声明new Vue→ 标签原样输出，无交互、无样式 - ⚠️ 注意：
el选项值必须是有效 CSS 选择器，且对应元素在执行new Vue()时已存在（不能是 JS 动态插入的） - ? 小技巧：在
<script></script>末尾加console.log(Vue, ElementUI)，确认两个全局变量都存在
最容易被忽略的是字体文件路径和挂载时机——很多人调试半天发现按钮没样式，其实是图标字体 404 导致整个 CSS 规则失效；或者 DOM 还没解析完就执行了 new Vue()，结果 el 找不到目标节点。这两处卡住，其他都白搭。
