Elment UI
1. 简介
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率
ElementUI PC端
MintUI 移动端
2. 快速上手
  
  使用vue-cli创建项目
  - vue init webpack-simple vue-element
  - cd vue-element
  - cnpm install
2.1 安装elment ui
cnpm install element-ui -S
2.2 在main.js中引入并使用组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //该样式文件需要单独引入
Vue.use(ElementUI);
这种方式引入了ElementUI中所有的组件
import Vue from 'vue'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //该样式文件需要单独引入
import App from './App.vue' Vue.use(ElementUI) new Vue({
el: '#app',
render: h => h(App)
}
 
2.3 在webpack.config.js中添加loader
CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader
默认并没有style-loader模块,所以需要单独安装
cnpm install style-loader --save-dev
2.4 使用组件
2.5 使用less
安装loader,需要两个:less、less-loader
cnpm install less less-loader -D
在webpack.config.js中添加loader
3. 按需引入组
3.1 安装babel-plugin-component
cnpm install babel-plugin-component -D
3.2 配置.babelrc文件
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3.3 只引入需要的插件
 

Vue(十八)Element UI的更多相关文章

  1. 任务三十八:UI组件之排序表格

    任务三十八:UI组件之排序表格 面向人群: 有一定JavaScript基础 难度: 低 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质 ...

  2. FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  3. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  4. vue同时安装element ui跟 vant

    记一个卡了我比较久的问题,之前弄的心态爆炸各种问题. 现在来记录一下,首先我vant是已经安装成功了的. 然后引入element ui npm i element-ui -S 接着按需引入,安装插件 ...

  5. ABP源码分析十八:UI Inputs

    以下图中描述的接口和类都在Abp项目的Runtime/Validation, UI/Inputs目录下的.在当前版本的ABP(0.83)中这些接口和类并没有实际使用到.阅读代码时可以忽略,无需浪费时间 ...

  6. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  7. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  8. vue加载Element ui地址省市区插件-- element-china-area-data

    1.安装 npm install element-china-area-data -S 2.使用(引入) import { provinceAndCityData, regionData, provi ...

  9. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. uva 11367 (Dijkstra+DP)

    题意:一辆汽车在一张无向图中开告诉你每个城市加油的费用.每次给q个查询(起点,终点,油箱容量)问你最小花费是多少. 思路:一道Dijkstra状态的题目.在这种最短路问题中一维的dis数组记录的信息往 ...

  2. SPOJ 1812 LCS2

    题解: 和上一题差不多 每个点记录前面的到这个点的最大值 初值赋为len[i] 然后注意要用子节点更新父节点 代码: #include <bits/stdc++.h> #define ll ...

  3. Codeforces 1045C Hyperspace Highways (看题解) 圆方树

    学了一下圆方树, 好神奇的东西呀. #include<bits/stdc++.h> #define LL long long #define fi first #define se sec ...

  4. Codeforces 596D Wilbur and Trees dp (看题解)

    一直在考虑, 每一段的贡献, 没想到这个东西能直接dp..因为所有的h都是一样的. #include<bits/stdc++.h> #define LL long long #define ...

  5. java生成二维码以及读取案例

    今天有时间把二维码这块看了一下,方法有几种,我只是简单的看了一下  google  的  zxing! 很简单的一个,比较适合刚刚学习java的小伙伴哦!也比较适合以前没有接触过和感兴趣的的小伙伴,o ...

  6. Java中String直接赋字符串和new String的区别(面试常考)

    摘取自:https://www.cnblogs.com/guozhenqiang/p/5633269.html 解析Java中的String对象的数据类型 1. String是一个对象.  因为对象的 ...

  7. L3-001 凑零钱 (30 分) dfs加后缀剪枝

    韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现这家店有个特别的规矩:你可以用任何星球的硬币付钱,但是绝不找零,当然也不能欠债.韩梅梅手边有 1 枚来自各个星球的硬币,需要请你帮她盘算一下,是 ...

  8. gevent实现生产者消费者

    from gevent import monkey;monkey.patch_all()from gevent.queue import Queue #队列 gevent中的队列import geve ...

  9. miniui表格load数据成功后,回调函数,其中setData要用如下方法

    init: function () { mini.parse(); this.grid = mini.get("jsDatagrid"); var grid1 = mini.get ...

  10. 002.Ceph安装部署

    一 前期准备 1.1 配置规格 节点 类型 IP CPU 内存 ceph-deploy 部署管理平台 172.24.8.71 2 C 4 G node1 Monitor OSD 172.24.8.72 ...