在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和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
JS delegate与live浅析
Dec 21 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
javascript中layim之查找好友查找群组
Feb 06 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
canvas时钟效果
2017/02/16 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python读取oracle函数返回值
2016/07/18 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python hough变换检测直线的实现方法
2019/07/12 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
房地产开盘策划方案
2014/02/10 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2014和解协议书范文
2014/09/15 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server