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. Java版本

    Java版本 Java版本分为J2SE(Java 2 Standard Edition,Java标准版).J2ME(Java 2 Micro Edition,Java微型版本)和J2EE(Java 2 ...

  2. “幸福企业”定义-参观“MES项目”有感

    作为公司的员工,总是想在一个自己满意的企业里面发展.作为企业主,虽不能天天将“回报社会”挂在嘴上,但凡是有抱负的,还是希望自己的部下“以厂为家的”.然而劳资双方的矛盾总是让双方感觉互有亏欠.这种不信任 ...

  3. Android性能测试工具Emmagee

    下面介绍一个简单实用的Android性能软件 ~~欢迎加入测试群574875837一起讨论研究 一.Emmagee 简介 Emmagee主要用于监控单个App的CPU,内存,流量,启动耗时,电量,电流 ...

  4. 用VUEJS做一个猫眼电影web app

    之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦.直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vu ...

  5. Java基础——变量、数据类型

    一 .变量 1.计算机的内存类似于人的大脑,计算机使用内存来记忆大量运算时要使用数据.内存是一个物理设备,如何来存储一个数据呢?很简单,把内存想象成一间旅馆,要存储的数据就好比要住宿的客人. 首先,旅 ...

  6. 1635: [Usaco2007 Jan]Tallest Cow 最高的牛

    1635: [Usaco2007 Jan]Tallest Cow 最高的牛 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 383  Solved: 211 ...

  7. PHP测试题讲解（20161027）

    注: 关联数组 关联数组,它的每个 ID 键都关联一个值.在存储有关具体命名的值的数据时,使用数值数组不是最好的做法.通过关联数组,我们可以把值作为键,并向它们赋值. 例子 1 在本例中,我们使用一个 ...

  8. matplotlib根据Y轴数量伸缩画图的py脚本

    #coding:utf-8import numpy as npimport matplotlib.pyplot as plt #X,Y轴数据y = [20,59,11,12,16,20,15,12,1 ...

  9. 开源中文分词工具探析（五）：FNLP

    FNLP是由Fudan NLP实验室的邱锡鹏老师开源的一套Java写就的中文NLP工具包,提供诸如分词.词性标注.文本分类.依存句法分析等功能. [开源中文分词工具探析]系列: 中文分词工具探析(一) ...

  10. 对于自定义标签类中JspBody类的invoke方法的理解

    下面是javaeeAPI中对于invoke()方法的介绍: 其中的参数out是一个Writer类的对象,如果写null,就是将标签体内容写到了与此jsp相关联的JspWriter对象,也就是下面的w: ...