1.安装并引用Element

① 安装

npm i element-ui -S

② 引用

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

关于.css文件在何处引入，要看个人爱好，笔者喜欢在当前使用到Element组件的地方引用，这样就不会造成main.js代码量过长。
当然，如果你的每个页面都会用到element组件，建议在main.js引用，因为在main.js引用是全局的。

2.安装babel-plugin-component

如果是使用vue-cli开发，记得安装babel-plugin-component。安装步骤如下：
① 下载babel-plugin-component

npm install babel-plugin-component -D

② 配置pageage.json文件

{
//presets:该选项不一定要和这里的一致，根据自己的项目决定
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

3.使用Element组件

使用的方式很简单，去官方复制粘贴即可。以Rate评分组件作为例子。

//html结构
<el-rate
  v-model="value5"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate>

//js逻辑代码
<script>
  export default {
    data() {
      return {
        value5: 3.7
      }
    }
  }
</script>

在引入的时候就出现问题了
第一，找不到fonts

出现这个的原因是因为在自己的项目中根本没有.fonts文件夹，所以我们需要从element-ui安装包中导入过来。这个文件夹的目录在 _element-ui@2.13.2@element-ui\lib\theme-chalk。将整个fonts文件夹复制到报错的那个目录下即可。
比如笔者报错的路径是 dangdang\src\assest\css\book 就将fonts文件夹复制到该路径下即可。
第二：文字图标没有配置loader

这个错误也是在引用ui组件的时候容易忽略的，原因是没有相应的loader去解析 .ttf 和 .wof 这两种后缀的图片。
解决的办法也很简单，在webpack.config.json文件中，找到有关图片配置的loader，加上这两中图片的后缀即可。比如：

以上就是笔者今天使用element遇到的坑，希望大家不要掉进去了，哈哈。
————————————————
小编博客原文链接：https://blog.csdn.net/weixin_43332684/article/details/107526709