Vue如何正确的使用Element组件库

  其实官网上写的很清楚，怎么安装，怎么引用。但是初学者（比如我）即使按部就班也会出现各种bug。所以我决定在这里写下自己遇到的错误以及如何解决的。

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遇到的坑，希望大家不要掉进去了，哈哈。