我写了一个叫 vue-manager 的管理后台

这是我在学完Vue后写的个人项目(也是我的第二个个人项目), 在此分享给大家学习使用。这是一个以Vue2.0为框架，结合 iView 和 ECharts 的后台组件，可以说是在 iView 基础上的进一步组件化。

默认的主题沿用vue的官方主题绿, logo的设计也是用 vue的官方logo 简单变形得到 M 的形状。

希望可以帮助使用者快速搭建基于Vue2.0的管理后台。

项目地址 github.com/luosijie/vu…

预览地址 luosijie.github.io/vue-manager

安装

安装 Node / npm(cnpm)
git clone "github.com/luosijie/vu…"
cpm install
pm run dev
访问 localhost:8080

依赖

Vue2.0
iView
ECharts

实现的功能

目前实现一些基本的信息展示和数据表格操作组件，希望以后有机会继续增加

信息总览
用户面板
工作进度
时间轴
天气面板
留言面板
基本表格
可编辑表格
图表
...

全局样式定义

全局样式的自定义沿用iView的主题定制方法, 可在文件夹src下的theme/index.less定义样式

组件使用

每个组件都有完整的UI样式和基本的交互，使用者只需要在组件外部绑定数据即可

举例

具体每个组件的使用可以查看Demo(项目文件夹的 Src目录) 和 vm-组件里的props属性

vm-progress

<VmProgress title="工作进度" :data="dataProgress"></VmProgress>
...

export default {
  data: function () {
   return dataProgress: [
      {
        name: 'Jesse Luo',
        tags: ['很帅', '逗比'],
        value: 90
      },
      {
        name: 'Angla Cool',
        tags: ['美丽', '感性', '文艺'],
        value: 30
      },
      {
        name: 'lele Wang',
        tags: ['气质', '厉害'],
        value: 80
      },
      {
        name: 'Jesse Ca',
        tags: ['才女', '努力', '博学'],
        value: 20
      },
      {
        name: 'Jesse Lee',
        tags: ['很帅', '牛逼'],
        value: 100
      }
    ],
  }
}

vm-timeline

<VmTimeline :data="dataTimeline"></VmTimeline>
...

export default {
  data: function () {
    return {
      dataTimeline: [
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        },
        {
          date: '2017年7月15日',
          time: '8:35 am',
          content: 'Lorem ipsum dolor sit amet consiquest dio'
        }
      ]
    }
  }
}

vm-chart-bar-line

<VmChartBarLine  title="二维柱形图" :xAxisData="dataBar2.xAxisData" :series="dataBar2.series">
</VmChartBarLine>
...

export default {
  data: function () {
    return {
      dataBar2: {
        xAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [50, 200, 360, 100, 100, 200]
          },
          {
            name: '增长量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
    }
  }
}

vm-table

vm-table的可编辑模式可以实现数据的增删改, 分别通过

v-on:add-ok="add"

v-on:delete-ok="deletefn">

来实现

<VmTable title="可编辑表格" 
         type="edit" 
         :columns="dataColumns" 
         :data="dataTable"
         v-on:add-ok="add"
         v-on:edit-ok="edit"
         v-on:delete-ok="deletefn">
</VmTable>
...

export default {
  methods: {
    add: function (data) {
      //...
    },
    edit: function (data) {
      //...
    },
    deletefn: function (data) {
      //...
    }
  },
  data: function () {
    return {
      dataColumns: [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address'
        }
      ],
      dataTable: [
        {
          id: '65416s843154',
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          id: '6541684q6534',
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗'
        },

        ...

        {
          id: '65419843f154',
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道'
        }
      ]
    }
  }
}

先这样了欢迎大家star