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

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 播放器插件