在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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
JS跨域总结
Aug 30 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
node 文件上传接口的转发的实现
Sep 23 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函数之子字符串替换 str_replace
2011/03/23 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP实现的json类实例
2015/07/28 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Python 使用with上下文实现计时功能
2018/03/09 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
python编程的核心知识点总结
2021/02/08 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
一套Java笔试题
2016/08/20 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
机关出纳岗位职责
2014/04/03 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书