在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中添加滚动事件设置的方法详解

    Vue中添加滚动事件设置的方法详解

    这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue将props值实时传递 并可修改的操作

    Vue将props值实时传递 并可修改的操作

    这篇文章主要介绍了Vue将props值实时传递 并可修改的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue 接口请求地址前缀本地开发和线上开发设置方式

    vue 接口请求地址前缀本地开发和线上开发设置方式

    这篇文章主要介绍了vue 接口请求地址前缀本地开发和线上开发设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 深入理解Vue 的钩子函数

    深入理解Vue 的钩子函数

    这篇文章主要介绍了Vue 的钩子函数,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue+element-ui表格封装tag标签使用插槽

    vue+element-ui表格封装tag标签使用插槽

    这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue 添加vux的代码讲解

    vue 添加vux的代码讲解

    通过命令npm install vux --save添加vux,在相关配置文件中配置信息,具体代码添加方法,大家参考下本文
    2017-11-11
  • vue如何通过id从列表页跳转到对应的详情页

    vue如何通过id从列表页跳转到对应的详情页

    这篇文章主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下
    2018-05-05
  • 解决axios post 后端无法接收数据的问题

    解决axios post 后端无法接收数据的问题

    今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue通过Blob对象实现导出Excel功能示例代码

    Vue通过Blob对象实现导出Excel功能示例代码

    这篇文章主要介绍了Vue通过Blob对象实现导出Excel功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 详解基于 Nuxt 的 Vue.js 服务端渲染实践

    详解基于 Nuxt 的 Vue.js 服务端渲染实践

    这篇文章主要介绍了详解基于 Nuxt 的 Vue.js 服务端渲染实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论