vue2.0+elementUI构建单页面后台管理平台

git:https://github.com/suweiteng/vue2-management-platform (记得点star哈,感谢~)
访问:https://suweiteng.github.io/vue2-management-platform

更新:

2017年7月11日 集成UE富文本编辑器功能

概述:

最近学习vue2.0和elementUI的使用,在各种文档的帮助下,尝试编写了一个后台管理平台。
目前数据采用mock.js模拟,比较简略。后续会进行细化并增加登录、表单等功能。

依赖项版本

"vue": "^2.1.0",   
"vue-router": "^2.1.3", // vue.js官方路由
"axios": "^0.16.1",   // 官方已不再推荐使用vue-resource,如今推荐axios。
"element-ui": "^1.2.3", // 样式库
"mockjs": "^1.0.1-beta3", //模拟数据使用
 具体请参考https://github.com/reg21st/vue_ui_test/blob/master/package.json

预览

vue2.0+elementUI构建单页面后台管理平台_第1张图片


vue2.0+elementUI构建单页面后台管理平台_第2张图片

vue2.0+elementUI构建单页面后台管理平台_第3张图片

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

部分代码

首页index.html



  
    
    后台管理系统
    
    
  
  
    

App.vue



App.vue

路由等
前期采用vue-resource,后期改为axios,方便修改,因此写了:Vue.prototype.$http = axios;

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import App from './App';
import Index from './components/index/index';
import Table from './components/table/table';
import Form from './components/form/form';
import other from './components/other/other';
import 'font-awesome/css/font-awesome.min.css';
import Mock from './mock/mock';
Mock.mockData();
Vue.use(VueRouter);// 安装路由功能
/* eslint-disable no-new */
Vue.use(VueRouter);
Vue.prototype.$http = axios;
Vue.use(ElementUI);

let routes = [
  {
    path: '/',
    component: App,
    children: [
      {path: '/index', component: Index, name: 'index', class: 'fa-line-chart'},
      {path: '/table', component: Table, name: 'table', class: 'fa-table'},
      {path: '/form', component: Form, name: 'form', class: 'fa-newspaper-o'},
      {path: '/other', component: other, name: 'other', class: 'fa-plug'}
    ]
  }
];
let router = new VueRouter({
  'linkActiveClass': 'active',
  routes
});
let app = new Vue({
  router
}).$mount('#app');
export default app;

git:https://github.com/suweiteng/vue2-management-platform (记得点star哈,感谢~)
访问:https://suweiteng.github.io/vue2-management-platform

你可能感兴趣的:(vue2.0+elementUI构建单页面后台管理平台)