uniapp elementui

### 在 UniApp 中集成和使用 ElementUI 组件库

#### 一、准备工作
为了在 UniApp (Vue2) 中成功集成并使用 ElementUI 的组件，开发者需确保项目的构建环境支持 Web 平台以及 H5 构建能力。由于 ElementUI 主要针对 PC 端浏览器设计，因此其更适合用于开发基于 H5 页面的应用场景。

#### 二、安装依赖包
通过 npm 或 yarn 安装 ElementUI 及其样式文件至项目中：

npm install element-ui --save

或者

yarn add element-ui

这一步操作会下载必要的 JavaScript 和 CSS 资源到本地环境中[^1]。

#### 三、配置 main.js 文件
编辑 `src/main.js` 文件来全局注册 ElementUI 库，并按需加载所需模块或全部导入整个 UI 库:

import Vue from 'vue';
// 导入ElementUI及其默认主题样式表
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

上述代码实现了对 ElementUI 功能性的全面引入和支持[^2]。

#### 四、处理字体图标问题
对于希望直接利用 ElementUI 提供的字体图标的开发者来说，默认情况下这些图标可能无法正常显示于 UniApp 内部。这是因为 UniApp 对外部资源有特殊的加载机制。解决办法是从 ElementUI 源码中的 `theme-chalk/fonts` 复制所需的 `.woff`,`.ttf` 字体文件连同 `icon.css` 至项目的静态资源目录（如 `/static`），并在 `main.js` 中手动引入该自定义路径下的 `icon.css` 文件以完成字体图标的正确渲染[^3]:

/* /static/icon.css */
@font-face {
    font-family: "element-icons";
    src: url('./fonts/element-icons.woff') format('woff'),
         url('./fonts/element-icons.ttf') format('truetype');
}

接着，在 `main.js` 添加如下语句实现引用：

import '@/static/icon.css'; // 自定义路径可根据实际情况调整

这样就完成了对 ElementUI 字体图标的适配工作，使得应用能够正常使用官方提供的矢量图形符号。

#### 五、实例化 App 实例启动程序
最后按照常规流程初始化应用程序即可开始享受 ElementUI 所带来的便捷体验了！

---