EasyDSS高性能流媒体服务器前端重构(三): webpack

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

element-ui 表格分页组件

源码位置: https://github.com/penggy/easydss-web-src/tree/blog_3

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