在vue2.0中引用element-ui组件库
element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库。
安装
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组件库的更多相关文章
- vue2.0中eventBus实现兄弟组件通讯
我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是event ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- ui组件库
基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
- Vue UI组件库
1. iView UI组件库 iView官网:https://www.iviewui.com/ 2.Vux UI组件库 Vux官网:https://vux.li/ 3.Element UI组件库 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- vue2.0中 怎么引用less?
vue2.0中 怎么引用less? 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置l ...
随机推荐
- Mysql----修改MySQL5.7的root的密码
在开始服务的情况之下 进入mysql 更改密码:update mysql.user set authentication_string=password('新的密码') where user='r ...
- 线程ThreadDemo04
package day190109; public class 线程ThreadDemo04 { public static void main(String[] args) throws Inter ...
- java基础学习总结——equals方法
一.equals方法介绍 1.1.通过下面的例子掌握equals的用法 package cn.galc.test; public class TestEquals { public static vo ...
- centos7 多网卡绑定bond0 之mod4
什么是mod4 mod=4,即:(802.3ad) IEEE 802.3ad Dynamic link aggregation(IEEE 802.3ad 动态链接聚合) 特点:创建一个聚合组,它们共享 ...
- Ubuntu 12.04上安装 MongoDB并运行
Ubuntu 12.04上安装 MongoDB并运行 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Terminal输入 sudo apt-key ...
- #000 Python 入门第一题通过扩展,学到了更多的知识
#1写在前面的话 我觉得这样学习或许能够在学习的过程中事半功倍 第一道简单的python编写代码输出10行带标号的“Hello,world.”,具体效果参阅输入输出示例 1:Hello,world. ...
- 使用Three.js挖空安装门来解决重叠闪烁的问题
一.挖空原理说明 subtract 用墙面减去与门重叠的部分,产生一个新的对象,导入材质安装门即可 //参与减去几何体 //平行于x轴门 var meshH4Door = new ThreeBSP( ...
- 【Window Power Shell】介绍与使用
Windows PowerShell 是专为系统管理员设计的新 Windows 命令行脚本环境,主要实现系统和应用程序管理自动化. 1.发展历史 在2002年,微软开始研究一个新的产品叫做”Monad ...
- line-height
如何实现左右两边有小竖线,但是高度比中间的字短? 用line-height,把line-height设置得跟height一样大,同时把font-size设置比line-height大即可
- MySQL大小写敏感的解决方案
前言:对于MySQL的大小写敏感的影响,笔者在一个小项目中深刻的体会到:当想要查询一条数据时,总是出来两条或多条,后来发现是大小写敏感造成的原因,本文就该问题提出解决方案. 1.MySQL大小写敏感的 ...