element组件库axture_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结构

v-model="value5"

disabled

show-score

text-color="#ff9900"

score-template="{value}">

//js逻辑代码

export default {

data() {

return {

value5: 3.7

}

}

}

在引入的时候就出现问题了

第一，找不到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