在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 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
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
php用户注册信息验证正则表达式
2015/11/12 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
javascript cookies操作集合
2010/04/12 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
高中毕业自我鉴定
2013/12/16 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python