接上篇
接上篇《高性能流媒體服務器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-devbabel-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
