git：https://github.com/suweiteng/vue2-management-platform （记得点star哈，感谢~）

访问：https://suweiteng.github.io/vue2-management-platform

概述：

最近学习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", //模拟数据使用

 更新：vue已升级至2.5.X，elementUI已升级至2.2，其他相关依赖也已升级，

 具体请参考https://github.com/suweiteng/vue2-management-platform/blob/master/package.json

更新

增加富文本编辑器(beta1.6)

2017年7月11日：集成Ueditor富文本编辑器，作为公共组件。

2017年7月13日：编辑器支持同页面多次调用。

2018年1月23日：编辑器支持小功能：获取纯文本(解决博客中40L评论的疑问)。

教程：http://www.cnblogs.com/dmcl/p/7152711.html

效果如下：



在线体验本功能：https://suweiteng.github.io/vue2-management-platform/#/editor

版本升级(beta2.0)

2018年2月25日：vue已升级至2.5.X，elementUI已升级至2.2，其他相关依赖也已升级。(beta2.0)

效果如下：

2018年2月26日：增加打包分析webpack-bundle-analyzer；优化导出功能。(beta2.1)

预览







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

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>后台管理系统</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="static/css/reset.css">

  </head>

  <body>

    <div id="app">

       <router-view></router-view>

    </div>

    <!-- built files will be auto injected -->

  </body>

</html>

App.vue

<template>

  <el-row class="container" style="height: 100%">

    <v-header :user="user"></v-header>

    <el-col :span="24" class="main">

      <el-row>

        <el-menu :default-active="$route.path" class="mar-l el-menu-vertical-demo el-col el-col-3" light router>

          <template v-for="(item,index) in $router.options.routes[0].children" v-if="!item.hidden">

            <el-menu-item :index="item.path" ><i class="fa" :class="item.class"></i>{{item.name}}</el-menu-item>

          </template>

        </el-menu>

        <section class="contentCon">

          <el-col :span="21" :offset="3" class="content-wrapper">

            <transition>

              <router-view></router-view>

            </transition>

          </el-col>

        </section>

      </el-row>

    </el-col>

  </el-row>

</template>

<script>

  import header from './components/header/header.vue';

  const ERR_OK = "000";

  export default {

    data () {

      return {

        user: {}

      };

    },

    created () {

      this.$http.get('/api/user').then((response) => {

        response = response.data;

        if (response.code === ERR_OK) {

          this.user = response.datas;

        }

      });

    },

    beforeCreate () {

      if (this.$route.path === '/') {

        this.$router.push({path: '/index'})

      }

    },

    components: {

      'v-header': header

    }

  };

</script>

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构建单页面后台管理平台的更多相关文章

  1. Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

    挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...

  2. Java快速开发平台强大的代码生成器，JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布

    JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...

  3. Vue2.0 + Element-UI + WebAPI实践：简易个人记账系统

    最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...

  4. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  5. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  6. 老男孩Day17作业：后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

  7. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...

  8. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  9. 使用vuejs2.0和element-ui 搭建的一个后台管理界面

    说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...

随机推荐

  1. HTML入门

    一些说明 写在前面:HTML和CSS,当你了解所有规则后,你应该多写页面并记录你出现的问题,这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后,再次回顾HTML,希望大家也对HTML有不一样 ...

  2. Kafka Eagle 源码解读

    1.概述 在<Kafka 消息监控 - Kafka Eagle>一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情.今天笔者通过其源码来解读实现细节.目 ...

  3. Linux的常用基本命令。

    Linux的常用基本命令. 首先启动Linux.启动完毕后需要进行用户的登录,选择登陆的用户不同自然权限也不一样,其中"系统管理员"拥有最高权限. 在启动Linux后屏幕出现如下界 ...

  4. Vuex 学习总结

    好在之前接触过 flux,对于理解 vuex 还是很有帮助的.react 学到一半,后来因为太忙,就放弃了,现在也差不多都忘记了.不过感觉 vuex 还是跟 flux 还是有点区别的. 对于很多新手来 ...

  5. 道路修建 2（自创题+题解）（From NOI2011）

    道路修建这道题想来各位不陌生(传送门在此——Bzoj2435),看了此题,一开始以为是最初各个点处于分散状态,然后做了一下,直到发现标程都有点问题,才发现原题是说本来各点已经处于连接完毕的状态(phi ...

  6. swift -- 类中的方法

    一. 引用类型  类 在类中定义方法 class Person { //属性 var name : String = "" //方法 //实例方法 : 在类里面创建一个方法 fun ...

  7. 机器学习基石 3 Types of Learning

    机器学习基石 3 Types of Learning Learning with Different Output Space Learning with Different Data Label L ...

  8. HTML5学习笔记<五>: HTML表单和PHP环境搭建

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  9. STM32F103RC进入串口3接收中断产生HardFault_Hander问题解决！

    最近在以前的项目上添加串口3通讯后,程序一进入接收中断后就产生HardFault_Hander.串口3发送数据一切正常,当打开串口3接收功能时,程序就处于HardFault_Hander状态,而导致死 ...

  10. HNOI（湖南省选试题）——永无乡

    今天写了一道十分巧妙的数据结构题---永无乡 (看的题解......) 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 ...