Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。
中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。
输入命令: node -v
由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
输入命令:cnpm install --global vue-cli
我这里是在d盘里面新建一个项目,先用d:
的命令,回车键进入d盘;回车键默认创建项目信息。
vue init webpack itemname
出现这样的提示,初始化成功
运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装elementUI;准备好好之后,开始引入饿了么elementUI组件。
npm i element-ui -S
快捷键ctrl+c,终止批处理操 作吗(Y/N),在输入命令npm i element-ui -S
注意:安装过程中出现这样的bug的时候,需要解决
解决办法:尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install.
成功安装组件显示如下
<template>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">
<a href="https://www.ele.me" target="_blank">订单管理</a>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Test></Test>
</div>
</template>
<script>
import Test from './components/test.vue'
export default {
components:{
Test,
},
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
import ElementUI from 'element-ui' //element-ui的全部组件 import 'element-ui/lib/theme-chalk/index.css'//element-ui的css Vue.use(ElementUI) //使用elementUI
输入命令:
npm run dev
打开test.vue文件,开始写代码
<template>
<div>
<el-time-picker
is-range
v-model="value"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
};
}
}
</script>
npm run dev 运行,浏览器显示如下,实现了一个简单的时间选择器
点击按钮的时候,元素会呈现一个出现和隐藏的动画功能。
<template>
<div>
<el-button @click="show = !show">点击按钮</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">我会消失在人海之中</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 300px;
height: 100px;
border-radius: 4px;
background-color: #42B983;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-left: 520px;
}
</style>
在用Element UI框架的时候
<template>
<div>
<el-row class="tac">
<el-col :span="4">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-s-platform"></i>
<span>服务大厅</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">在场服务</el-menu-item>
<el-menu-item index="1-2">历史服务</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-s-tools"></i>
<span>系统设置</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">权限管理</el-menu-item>
<el-menu-item index="1-2">角色管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-user-solid"></i>
<span>人员数据</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">人员数量</el-menu-item>
<el-menu-item index="1-2">人员位置</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-message-solid"></i>
<span>健康报警</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">心率报警</el-menu-item>
<el-menu-item index="1-2">血压报警</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
导航菜单效果如下所示
## 导航栏跳转路由
### 1:components 新建页面
### 2:打开app.vue写代码
<template>
<div>
<el-col :span="2">
<el-menu
:default-active="this.$route.path"
router mode="horizontal"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
<template slot="title">
<i class="el-icon-s-platform"></i>
<span> {
{ item.navItem }}</span>
</template>
</el-menu-item>
</el-menu>
</el-col>
<router-view class="menu-right"/>
</div>
</template>
<script>
export default {
data() {
return {
navList:[
{name:'/components/ServiceHall',navItem:'服务大厅'},
{name:'/components/Management',navItem:'权限管理'},
{name:'/components/User',navItem:'用户管理'},
{name:'/components/Personnel',navItem:'人员数据'},
{name:'/components/Alarm',navItem:'报警中心'},
] }
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style>
.menu-right{
margin-left:200px;
}
</style>
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ServiceHall from '@/components/ServiceHall'
import Management from '@/components/Management'
import User from '@/components/User'
import Personnel from '@/components/Personnel'
import Alarm from '@/components/Alarm'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/components/ServiceHall',
name: 'ServiceHall',
component: ServiceHall
}, {
path: '/components/Management',
name: 'Management',
component: Management
},
{
path: '/components/User',
name: 'User',
component: User
},{
path: '/components/Personnel',
name: 'Personnel',
component: Personnel
},{
path: '/components/Alarm',
name: 'Alarm',
component: Alarm
}
]
})
<template>
<div>
我是权限管理页面
</div>
</template>
<script>
</script>
<style>
</style>
npm install axios --save
import axios from 'axios'
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据 http://www.intmote.com/test.json
在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码
proxyTable: { '/api': { target: 'http://www.intmote.com',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true,//允许跨域 pathRewrite: { '^/api': '' //这个是定义要访问的路径,名字随便写 } } },
methods: { getData() { axios.get('/api/test.json').then(response => { console.log(response.data); }, response => { console.log("error"); }); } }
User.vue参考代码:
<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('/api/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
这个时候,我们可以看见,请求的数据
test.json:
{
"first":[
{"name":"520","nick":"我爱你"},
{"name":"521","nick":"我愿意"},
{"name":"1314","nick":"一生一世"}
]
}
// mock code
const express = require('express')
const app = express()
const posts = require('../mock/test.json')
const routes = express.Router()
app.use('/api', routes)
// 如果是post请求,那么将get改为post即可
devServer: {
...
before(app){
app.get('/api/test', (req, res) => {
res.json(posts)
})
}
}
成功看到模拟数据
methods: {
getData() {
axios.get('http://localhost:8080/api/test').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
vue页面代码参考
<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('http://localhost:8080/api/test').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
5:在浏览器里面,我们可以看到,mock里面的数据请求成功显示如下
其实步骤很简单,代码如下
<template>
<div id="app">
<div v-for="item in itemList">
<span>{
{item.name}}</span>
<span>{
{item.nick}}</span>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('http://localhost:8080/api/test').then(response => {
console.log(response.data);
this.itemList =response.data.first;
}, response => {
console.log("error");
});
}
}
}
</script>
打开界面,既可以看到,所需要的数据一家展示在前端的界面了
接着之前的项目继续写,打开一个vue界面,在里面写如下代码:
<template>
<div>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
<el-table-column prop="id" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="price" label="地址">
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes,prev, pager, next"
:total="tableData.length"
prev-text="上一页"
next-text="下一页">
</el-pagination>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
currentPage: 1, //默认显示页面为1
pagesize: 5, // 每页的数据条数
tableData: [], //需要data定义一些,tableData定义一个空数组,请求的数据都是存放这里面
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('http://localhost:8080/api/test').then(response => {
console.log(response.data);
this.tableData = response.data;
}, response => {
console.log("error");
});
},
//每页下拉显示数据
handleSizeChange: function(size) {
this.pagesize = size;
/*console.log(this.pagesize) */
},
//点击第几页
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
/*console.log(this.currentPage) */
},
}
}
</script>
test.json
[
{
"id": 0,
"name": "Item 0",
"price": "徐家汇"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "徐家汇"
},
{
"id": 4,
"name": "Item 4",
"price": "徐家汇"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "徐家汇"
},
{
"id": 9,
"name": "Item 9",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
},
{
"id": 11,
"name": "Item 11",
"price": "$11"
},
{
"id": 12,
"name": "Item 12",
"price": "徐家汇"
},
{
"id": 13,
"name": "Item 13",
"price": "$13"
},
{
"id": 14,
"name": "Item 14",
"price": "$14"
},
{
"id": 15,
"name": "Item 15",
"price": "$15"
},
{
"id": 16,
"name": "Item 16",
"price": "徐家汇"
},
{
"id": 17,
"name": "Item 17",
"price": "$17"
},
{
"id": 18,
"name": "Item 18",
"price": "$18"
},
{
"id": 19,
"name": "Item 19",
"price": "徐家汇"
},
{
"id": 20,
"name": "Item 20",
"price": "$20"
}
]
效果如下
到这里就成功的实现了一个表格和分页了,数据是用mock模拟的,实际中换成后端的接口就可以了 。
文章浏览阅读274次。与CWDM类似,它也是一种基于波分复用技术的光纤传输技术,但它的通道数更多、信道间隔更小,可以实现更高的传输容量。它是一种基于波分复用技术的光纤传输技术,可将来自不同来源的多个光信号,按照不同的波长,通过同一根光纤进行传输。顾名思义,它是一种基于滤波器的波分复用技术,通过精细的滤波器设计,将不同波长的光信号分离出来进行传输。它与CWDM和DWDM类似,但波长范围更偏向于长波长光信号的传输,适用于某些特定的光纤传输应用场景。_tdm cwdm lwdm mwdm
文章浏览阅读3.3k次。本地打的包对依赖的jar包是从本地仓库中取,所以如果多模块项目中自己写的被依赖的模块要保证私服中始终是最新的代码,及时安装到本地。线上使用jenkins打的包是从私服上拉代码,所以要保证本地修改在打包前一定要提交到私服上。jenkins打的包和本地不一样是,考虑以下方面,看看服务器时间是否不一样,或者在jenkins的代码拉取是加上@head。..._vue项目 linux打包和本地打包有区别嘛
文章浏览阅读80次。EOS的共识机制是DPoS(Delegated Proof of Stake),而不是BFT。EOS采用DPoS的设计,它侧重于代币持有者的投票,代表人轮流生成区块,而不同于传统的BFT机制。虽然EOS的DPoS也旨在确保网络的安全性和一致性,但它的工作方式和设计思路与BFT不同。BFT共识机制是一种用于分布式系统的共识算法,可以确保在存在故障或恶意行为的情况下系统仍能达成一致的决策。总之,EOS的共识机制是DPoS,而不是传统的BFT,这两者在设计和工作原理上有很大的不同。
文章浏览阅读527次。在一个由 ‘0’ 和 ‘1’ 组成的二维矩阵内,找到只包含 ‘1’ 的最大正方形,并返回其面积。_最大正方形c++
文章浏览阅读4.8k次,点赞12次,收藏13次。【Spring Boot】解决报错MyBatis 无效的绑定语句错误的原因是Maven未将Mapper的xml复制到类路径下,导致MyBatis找不到Mapper接口对应的xml文件。有两种方法第一种把Mapper接口与Mapper.xml放在同一个包下第二种在 pom.xml 中添添加如下配置<dependencies> ...</dependencies><build> <resources> <r_mybatis连接多数据源报错无效绑定
文章浏览阅读1.4w次,点赞4次,收藏15次。Qt Quick提供了一个类 AnimatedImage ,可以播放 Gif 动画,使用简单,这里是一个示例。_animatedimage gif支停顿
文章浏览阅读3.4k次。西门子人机界面TP1200,基于SMTP功能,实现自动发送邮件功能_精智触摸屏发送邮件怎么发送
文章浏览阅读446次。goose3主要用于新闻、文章的主要信息提取。GOOSE将尝试提取以下信息:文章主文文章图片文章中的YouTube / Vimeo视频描述标记标签使用pip安装pipinstallg..._goose 文本解析库
文章浏览阅读5.2k次,点赞2次,收藏9次。在某些应用中,可能需要PNG图片每个像素颜色索引值。如在目标检测中,VOC2012数据库中对每个目标类进行了分割标注,不同类别分别采用不同的颜色索引值。如0 表示背景, 1表示飞机等。opencv中的imread函数可以直接读出png RGB颜色信息,但是不能读出每个像素的颜色索引值。所以,本文给出了一个读取png图片每个像素颜色索引的函数。该函数依赖libpng库,并且和opencv相结合,利用_png_get_color_type
文章浏览阅读2.6k次。### 定积分换元法设$f$在$[a,b]$上连续,$\varphi$在$[\alpha,\beta]$上可导且导数连续,$x=\varphi(t)$在$[\alpha,\beta]$上的值域包含于$[a,b]$,且$\varphi(\alpha)=a,\varphi(\beta)=b$,则_定积分换元
文章浏览阅读4.3k次,点赞8次,收藏38次。 海明码(Hamming Code)是一个可以有多个校验位,具有检测并纠正一位错误代码的纠错码,所以它也仅用于信道特性比较好的环境中,如以太局域网中,因为如果信道特性不好的情况下,出现的错误通常不是一位。 海明码的检错、纠错基本思想是将有效信息按某种规律分成若干组,每组安排一个校验位进行奇偶性测试,然后产生多位检测信息,并从中得出具体的出错位置,最后通过对错误位取反(也是原来是1就变..._hanmming code (64 8) sec_ded
文章浏览阅读2.4k次。问题现象:本来在main.aspx页面上用了1个 dropdownlist显示主信息 要实现 选择一个后 在ListBox中显示其明晰 。 设置dropdownlist 的 AutoPostBack后 起了作用 。但是后来在页面加了些东西(判断是否已经是登陆成功 ,就是防止用户直接敲入该页面的url), 现在OnSelectedIndexChanged不自动触发了 只有点了页面上其_.net 2.0 dropdownlist autopostback="true" selectedindexchanged 不刷新页面