高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
来源:互联网 发布:在js中引入html页面 编辑:程序博客网 时间:2024/06/07 06:44
接上篇
接上篇《高性能流媒体服务器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 播放器插件
获取更多信息
邮件:support@easydarwin.org
WEB:www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
阅读全文
0 0
- EasyDSS高性能流媒体服务器前端重构(三): webpack + vue + AdminLTE 多页面引入 element-ui
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- EasyDSS高性能流媒体服务器前端重构(一):从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- EasyDSS高性能流媒体服务器前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- EasyDSS高性能流媒体服务器前端重构(四): webpack + video.js 打造流媒体服务器前端
- 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- Webpack、Vue、Element UI基础工程构建
- 【Vue】 element ui 引入第三方图标
- 在vue中如何引入element-ui
- easyNVR连接easyDSS流媒体服务器
- CANFiber是什么?
- Hive 之 查询显示列名 及 行转列显示
- Linux下如何设置自己的程序随机启动
- HDU 1796 How many integers can you find
- 屏幕适配最全方案
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- DIV+CSS让文字垂直居中
- 关于Spirng IOC的注解说明
- SpringMVC与Struts2区别与比较总结
- Faster R-CNN基于代码实现的细节
- 2017 Multi-University Training Contest
- 使用DBSolo5如何连接Oracle数据库
- ArrayList和Vector的区别
- EditText 键盘右下角显示发送