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


Posted in Javascript onJune 21, 2018

在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组件库的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
javascript定义函数的方法
Dec 06 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue树形结构获取键值的方法示例
Jun 21 #Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 #Javascript
Vue 获取数组键名的方法
Jun 21 #Javascript
Taro集成Redux快速上手的方法示例
Jun 21 #Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 #Javascript
JS实现快递单打印功能【推荐】
Jun 21 #Javascript
详解javascript中的babel到底是什么
Jun 21 #Javascript
You might like
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
tornado捕获和处理404错误的方法
2014/02/26 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python学习小技巧总结
2018/06/10 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python多线程扫描端口(线程池)
2019/09/04 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
毕业生自荐书
2013/12/18 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
房产买卖委托公证书
2014/04/04 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年医务科工作总结
2014/12/18 职场文书
升职感谢信
2015/01/22 职场文书
介绍信怎么写
2015/05/05 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript