webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...

发布时间：2023-05-20 10:00

接上篇

本文围绕着实现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 如下:

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',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

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);

}

先 import 再 Vue.use ,就可以愉快的使用了. 因为前面我们安装并配置了 babel-plugin-component 它将自动为我们引入相关组件的样式

来看看效果吧

基于前面搭建好的这一套脚手架, 后面再引入第三方组件库就变得很容易了, 我们来看看运行效果吧.

npm run start

下一篇, 介绍如何引入 videojs 播放器插件

获取更多信息

高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间

本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回

高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端

接上篇接上篇本文围绕着实现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流媒体服务器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推流 ...

随机推荐

[Asp.net 5] DependencyInjection项目代码分析3-Ninject

Microsoft.Framework.DependencyInjection.Ninject 该工程内部共包含5个类文件,底层使用Ninject实现依赖注入,工程截图如下: 从文件命名可以看出,Ni ...

Java——异常

/* * 异常: 是在运行时期发生的不正常情况. * 在java中类的形式对不正常情况进行了描述和封装对象. * * 描述不正常的情况类,就成为异常. * * 问题很多,就意味着描述 ...

wrong number of arguments,java方法反射时数组参数的坑

java方法中只有一个参数是数组,反射的时候我们不能想当然的传歌数组进去,传数组进去的时候表示多个参数. 两个数组不是一个意思啊. 我们应该把数组转为objet,这样才表示一个参数. import j ...

delphi中的各种文件类型介绍

1.DPR: Delphi Project文件,包含了Pascal代码.应用系统的工程文件2.PAS: Pascal文件,Pascal单元的源代码,可以是与窗体有关的单元或是独立的单元.3.DFM:D ...

failure injection

(1)malloc穷尽的情况: 假设下面的代码是测试代码,里面含有被测函数fmalloc,其中含有一个malloc语句,在一般情况下,是很难走到malloc失败的分支的,因为很难模拟系统内存耗尽的情况 ...

【JAVA面试】java面试题整理(4)

如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务

如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务? 我这里的测试环境是ArcGISServer10.1和TerraExplorer Pro7.0,主要过程截图如下,

从github checkout子文件夹

1.将远程项目加载到指定目录:$git init; $git remote add -f origin url2.使用SparseCheckout模式:$git config core.sparsec ...

奇怪吸引子---LorenzStenflo

奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装

阅读目录 1. 通过HttpServletRequest获得请求参数和数据 2. 处理方法形参名==请求参数名 3. 如果形参名跟请求参数名不一样怎么办呢?用@RequestParam注解 4. 用实 ...

webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...

相关推荐