高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
接上篇
接上篇《高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间》
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到!
element-ui 介绍
饿了么前端开发组件框架 element-ui 是 “一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。”
本篇将在前面的脚手架基础上, 引入 element-ui, 并完成一个分页表格.
安装配置 element-ui
npm i element-ui babel-plugin-component --save-dev
babel-plugin-component 用来控制只引入需要的组件,以达到减小项目体积的目的。
将 .babelrc 修改如下:
{
"presets": [
"es2015",
"stage-2"
],
"plugins": [[ "component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
在自己的组件中使用 element-ui
修改 index.vue 如下:
<template>
<div class="container-fluid no-padding">
<div class="alert alert-success">{{msg}}</div>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<br>
<el-pagination layout="prev,pager,next" class="pull-right" :total="total" :page-size.sync="pageSize" :current-page.sync="currentPage"></el-pagination>
</div>
</template>
<script>
import Vue from 'vue'
import { Table, TableColumn, Pagination } from 'element-ui'
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
msg: "我是视频广场"
}
},
computed: {
total() {
return this.tableData.length;
},
pageData() {
let start = (this.currentPage - 1) * this.pageSize;
let end = start + this.pageSize;
return this.tableData.slice(start, end);
}
},
}
</script>
先 import 再 Vue.use ,就可以愉快的使用了. 因为前面我们安装并配置了
babel-plugin-component
它将自动为我们引入相关组件的样式
来看看效果吧
基于前面搭建好的这一套脚手架, 后面再引入第三方组件库就变得很容易了, 我们来看看运行效果吧.
npm run start
源码位置: https://github.com/penggy/easydss-web-src/tree/blog_3
下一篇, 介绍如何引入 videojs 播放器插件
获取更多信息
Copyright © EasyDarwin.org 2012-2017
高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui的更多相关文章
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
- 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端
接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-s ...
- EasyDSS高性能流媒体服务器开发RTMP直播同步输出HLS(m3u8)录像功能实现时移回放的方案
EasyDSS商用流媒体服务器解决方案是由EasyDarwin开源团队原班人马开发的一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,支持RTMP推流 ...
随机推荐
- extern "C"解析
转自大牛的解析(非常具体详细)http://www.cnblogs.com/skynet/archive/2010/07/10/1774964.html 我做个简单的标注方便以后自己查看: 在用C++ ...
- ELK之filebeat替代logstash收集日志
filebeat->redis->logstash->elasticsearch 官网下载地址:https://www.elastic.co/downloads/beats/file ...
- su su- sudo
su的作用是变更为其它使用者的身份,超级用户除外,需要键入该使用者的密码. linux su 命令 建议大家切换用户的时候 使用 su - root 这样,否则可能发现某些命令执行不了 关于su .s ...
- mysql之日期函数
写在前面 mysql的学习,断断续续,今天就接着学习mysql的日期操作吧. 系列文章 mysql之创建数据库,创建数据表 mysql之select,insert,delete,update mysq ...
- 聊聊、Zookeeper 数据结构和操作命令
Zookeeper 的视图结构跟标准的 Unix 文件系统很像,都有一个根节点 / .在根节点下面就是一个个的子节点,我们称为 ZNode.ZNode 是 Zookeeper 中最小数据单位,在 ZN ...
- Android JNI&NDK编程小结及建议
前言 由于网上关于JNI/NDK相关的知识点介绍的比较零散而且不具备参照性,所以写了这篇JNI/NDK笔记,便于作为随时查阅的工具类型的文章,本文主要的介绍了在平时项目中常用的命令.JNI数据类型.签 ...
- pandas常用操作
删除某列: concatdfs.drop('Unnamed: 0',axis=1) 打印所有列名: .columns
- nginx/iptables动态IP黑白名单实现方案
nginx/iptables动态IP黑白名单实现方案 一.手动封IP步骤 1.Nginx手动封IP 1.获取各个IP访问次数 awk '{print $1}' nginx.access.log |so ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- Batch update returned unexpected row count from update [0];
Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1; nested ...