Elment UI的使用说明
一、 Elment UI
1、 简介
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率,就如同bootstrap。
2、组件分类
ElementUI 适用于PC端
MintUI 适用于手机移动端
3、官网
http://element.eleme.io/
二、快速上手
1、 安装elment ui
cnpm install element-ui -S
2、 在main.js中引入并使用组件(全局引入)
1、import ElementUI from 'element-ui' //只是引入了ElementUI的js文件
2、import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入,引入的是ElementUI的css样式文件
3、Vue.use(ElementUI); //使用ElementUI组件,这种方式引入了ElementUI中所有的组件
4、示例:
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
import App from './App.vue' Vue.use(ElementUI); new Vue({
el: '#app',
render: h => h(App)
})
3、 在webpack.config.js中添加loader
1、 CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader
2、默认并没有style-loader模块,所以需要单独安装
cnpm install style-loader --save-dev
3、示例
var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test:/\.css$/,
loader:'style-loader!css-loader'//加载elment ui的style和css
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test:/\.less$/,
loader:'less-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
4、 使用组件
<template>
<div id="app">
{{msg}}
<br>
<!-- 按钮 -->
<el-button type="primary">我的按钮</el-button>
<el-button type="danger">我的按钮</el-button>
<el-button type="info">我的按钮</el-button>
<el-button type="warning">我的按钮</el-button>
<el-button type="success">我的按钮</el-button>
<br>
<br>
<el-button type="success" icon="edit">编辑</el-button>
<el-button type="success" icon="search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<hr>
<br>
<!-- 图标 -->
<i class="el-icon-close"></i>
<i class="el-icon-delete"></i>
<i class="el-icon-loading"></i>
<hr>
<!-- 布局 -->
<el-row>
<el-col :span="" class="grid">welcome</el-col>
<el-col :span="" class="grid">to</el-col>
<el-col :span="" class="grid">itany</el-col>
<el-col :span="" class="grid">网博</el-col>
</el-row>
<el-row>
<el-col :span="" class="grid">welcome</el-col>
<el-col :span="" class="grid">to</el-col>
</el-row>
<hr>
<!-- 日期选择器 -->
<DatePicker></DatePicker>
<!-- 文件上传 -->
<Upload></Upload> </div>
</template> <script>
import DatePicker from './components/DatePicker.vue'//引入自己定义的组件
import Upload from './components/Upload.vue' export default {
name: 'app',
data () {
return {
msg: '欢迎来到南京网博'
}
},
components:{//注册自己引入的组件
DatePicker,
Upload
}
}
</script> <style lang="less"> /* 必须要指定lang="less" */
.grid{
border:1px solid #ccc;
font-size:20px;
color:@color;
.h(50px);
}
@color:red;
.h(@height){
height:@height;
}
</style>
APP.VUE
<template>
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
size="small"
:picker-options="options">
</el-date-picker>
</template> <script>
export default {
data(){
return {
value:'',
options:{
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;//计算时间在今天之前
},
firstDayOfWeek:1
}
}
}
}
</script>
DatePicker.vue
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template> <script>
export default {
data(){
return {
fileList: [
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
},
{
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}
]
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
} </script>
Upload.vue
5、 使用less(动态css,在style中必须要指定lang="less")
1、安装loader,需要两个:less、less-loader
cnpm install less less-loader -D
2、 在webpack.config.js中添加loader
6、 按需引入组(局部引入)
1、 安装babel-plugin-component
cnpm install babel-plugin-component -D
2、 配置.babelrc文件
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3、只引入需要的插件
Elment UI的使用说明的更多相关文章
- 2 Elment Ui 日期选择器 格式化问题
Elment Ui 日期选择器 格式化问题 在前后端联调过程中 我们常常会遇到日期无法被反序列化 这个问题 会有点头疼 下面以我这边为例 后端使用的是springboot 默认集成了jackjson ...
- SpringBoot 整合文件上传 elment Ui 上传组件
SpringBoot 整合文件上传 elment Ui 上传组件 本文章记录 自己学习使用 侵权必删! 前端代码 博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload ...
- JEECG-Swagger UI的使用说明
一.代码生成 (此步骤为代码生成器的使用,如不清楚请查阅相关文档视频) 1.进入菜单[在线开发]-->[Online表单开发],选中一张单表/主表,点击代码生成按钮. 2.弹出页面中填写代码生成 ...
- elment ui 图片上传遇到的一些问题
图片上传返回200,message显示请上传图片 注意上图中的name字段要和服务器接受的name相同,这里我们是imgfile,默认name不是这个,所以要在el-upload组件上设置name属性 ...
- vue 基于elment UI tree 组件实现带引导、提示线
实现样式 准备工作,先实现 树状组件的基本样式 <span style="height:500px; display:block; overflow-y:auto;" cla ...
- Vue(十八)Element UI
Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...
- vue学习记录
vue中常用的指令 v-model 双向数据绑定,一般用于表单元素 v-for 对数组或对象进行循环操作,使用的是v-for <!-- 普通循环 --><li v-for=" ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue知识点精简汇总
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) 2. 定义组件的 ...
随机推荐
- 第二百五十七节,Tornado框架-路由映射,逻辑处理,文件归类配置
Tornado框架-路由映射,逻辑处理,文件归类配置 Tornado框架 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起 ...
- Web设计的速查卡(转)
一.排版 1.VisiBone Font Card Download: GIF 2.常用字体表 (HTML) 3.混合字体 (PDF) 二.单元/尺寸 1.Points 和Pixels近似转换表 (H ...
- mysql的优化基础知识
1.查看各种SQL执行的频率 mysql> show status like 'Com_select';--Com_insert,Com_delete,connections(试图连接mysql ...
- SVN入门2
TortoiseSVN 以简单易用的安装包的形式发布.双击安装文件并按照提示操作.安装文件会照顾其余的事情.安装结束后不要忘记重启电脑. Import(导入) 导入.导出是以服务器上的版本库为中心的. ...
- codevs 5965 [SDOI2017]新生舞会
分数规划的裸题. 不会分数规划的OIer.百度:胡伯涛<最小割模型在信息学竞赛中的应用> /* TLE1: last:add(i,j+n,1e9,(real)((real)a[i][j]- ...
- android studio升级时提示 Connection failed. Please check your network connection and try again
原文地址 http://www.eyeapk.com/android-studio-update.html Mac OSX中修改文件路径为 bin/idea.vmoptions ,添加如下内容,如果无 ...
- Struts2中的拦截器详解
exception:异常拦截器,拦截异常aliasservletConfig18nprepare:预备拦截器,这个拦截器就是为了ModelDriven准备对象的,若Action类实现了preparab ...
- tcpdump linux抓http请求头
sudo tcpdump -i eth0 port 80 -s 1024 -l -A
- timeline css
CODE <!doctype html> <html> <head> <meta charset="UTF-8"> <titl ...
- js Ajax 跨域请求
一.使用jsonp的方式(只支持get请求) 二.使用cors的方式(支持HTTP的大部分请求方式) 三.apache的转发(修改服务器配置) 没有试验,暂时不详细写!