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. js中盒子模型常用的属性你还记得几个？

    //clientWidth;//内容宽度Width+左右填充padding//clientHeight;//内容高度height+上下填充padding//clientLeft;//左边框的宽度相当于 ...

  2. 自学html5要花多长时间

    自学html5培训课程对于没有基础的那么就需要从头开始学,主要包括以下几方面 1. PC端网页制作基础,包括css,html 2. Javascript.jquery 主要是写一些动效 3. 学习UI ...

  3. NodeJS链接MongDB

    创建一个mongdb.js var mongodb = require('mongodb') // 创建数据库服务的链接 var server = new mongodb.Server( 'local ...

  4. 问题 ： lang.NoClassDefFoundError: org/springframework/core/annotation/AnnotatedElementUtils，的解决方法

    今天在做junit 测试的时候  出现了一个问题,花了一段时间 才解决. java.lang.NoClassDefFoundError: org/springframework/core/annota ...

  5. Python开发【第十八篇】Web框架之Django【基础篇】

    一.简介 Python下有许多款不同的 Web 框架,Django 是重量级选手中最有代表性的一位,许多成功的网站和APP都基于 Django. Django 是一个开放源代码的Web应用框架,由 P ...

  6. KoaHub平台基于Node.js开发的Koa EJS渲染插件代码信息详情

    koa-ejs ejs render middleware for koa koa-ejs Koa ejs view render middleware. support all feature of ...

  7. webStorm Linux Ubuntu 中文搜狗输入问题

    1 打开安装路径下bin/webstorm.sh vim ~/WebStorm-145.597.6/bin/webstorm.sh 2.在打开文件的最前面加入如下代码: export XMODIFIE ...

  8. jumpserver 堡垒机环境搭建（图文详解）

    摘要: Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 完全开源,GPL授权 Python编 ...

  9. 10分钟精通SharePoint - SharePoint发展历程

    SharePoint 2001: SharePoint Team Service(STS) SharePoint Portal Server(SPS) SharePoint 2003: Windows ...

  10. 【Unity编程】四元数(Quaternion)与欧拉角

    版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 欧拉旋转.四元数.矩阵旋转之间的差异 除了欧拉旋转以外,还有两种表示旋转的方式:矩 ...