脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2.0引用element-ui组件库

在vue2.0中引用element-ui组件库的方法

 更新时间：2018年06月21日 14:45:49   作者：雨霖月寒  
这篇文章主要介绍了在vue2.0中引用element-ui组件库,需要的朋友可以参考下

在vue2.0中引用element-ui组件库

element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库。

官网： http://element.eleme.io/

安装

npm i element-ui -S

引用完整的element-ui

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

需要注意的是，样式文件需要单独引入。

如果报错，在 webpack.config.js 中配置 file_loader。可以在 rules 数组内直接增加下面这个配置项：

{
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'
}

按需引入组件

1、安装 babel-plugin-component 插件：

npm install babel-plugin-component -D

2、修改 .babelrc 配置文件

将

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

改为：

{
 "presets": [["env", { "modules": false }]],
 "plugins": [
  [
   "component",
   {
  "libraryName": "element-ui",
  "styleLibraryName": "theme-chalk"
   }
  ]
 ]
}

3、如果报错，在 webpack.config.js 中配置 file_loader。

可以在 rules 数组内直接增加下面这个配置项：

{
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'
}

4、使用组件

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

总结

以上所述是小编给大家介绍的在vue2.0中引用element-ui组件库的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 详解如何将 Vue-cli 改造成支持多页面的 history 模式

    详解如何将 Vue-cli 改造成支持多页面的 history 模式

    本篇文章主要介绍了详解如何将 Vue-cli 改造成支持多页面的 history 模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vueJs函数readonly与shallowReadonly使用对比详解

    vueJs函数readonly与shallowReadonly使用对比详解

    这篇文章主要为大家介绍了vueJs函数readonly与shallowReadonly使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 详解Vue.js中的组件传值机制

    详解Vue.js中的组件传值机制

    Vue.js 是一款流行的前端框架,它提供了一些方便的机制来管理组件之间的通信,其中包括组件传值,本文将详细介绍 Vue.js 中的组件传值机制,包括父子组件传值、兄弟组件传值、跨级组件传值等多种方式,需要的朋友可以参考下
    2023-08-08
  • BuildAdmin elementPlus自定义表头添加tooltip方法示例

    BuildAdmin elementPlus自定义表头添加tooltip方法示例

    这篇文章主要介绍了BuildAdmin elementPlus 自定义表头,添加tooltip实现方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • element中的el-upload附件上传与附件回显

    element中的el-upload附件上传与附件回显

    这篇文章主要介绍了element中的el-upload附件上传与附件回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 前端全屏显示解决方案分享(附图文详解)

    前端全屏显示解决方案分享(附图文详解)

    这篇文章主要介绍了前端实现全屏显示的三种解决方案,并针对每种方案的适用场景和优缺点进行了详细分析,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • vue的指令和插值问题汇总

    vue的指令和插值问题汇总

    Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下
    2022-10-10
  • vue2 webpack proxy与nginx配置方式

    vue2 webpack proxy与nginx配置方式

    这篇文章主要介绍了vue2 webpack proxy与nginx配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue使用ajax获取后台数据进行显示的示例

    vue使用ajax获取后台数据进行显示的示例

    今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vxe-Table开发中的各种坑以及避坑指南

    Vxe-Table开发中的各种坑以及避坑指南

    vxe-table是一个全功能的Vue表格,满足绝大部分对Table的一切需求,与任意组件库完美兼容,下面这篇文章主要给大家介绍了关于Vxe-Table开发中各种坑以及避坑的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论