我寫了一個叫vue-manager的管理後臺

這是我在學完Vue後寫的我的項目(也是個人第二個 我的項目), 在此分享給你們學習使用。
這是一個以Vue2.0爲框架，結合 iView 和 ECharts 的後臺組件， 能夠說是在 iView 基礎上的進一步組件化。
默認的主題沿用vue的官方主題綠, logo的設計也是用 vue的官方logo 簡單變形獲得 M 的形狀。

但願能夠幫助使用者快速搭建基於Vue2.0的管理後臺。

項目地址 https://github.com/luosijie/vue-manager

預覽地址 https://luosijie.github.io/vue-manager

安裝

1. 安裝 Node / npm(cnpm)

2. git clone "https://github.com/luosijie/vue-manager"

3. cpm install

4. cpm run dev

5. 訪問 localhost:8080

依賴

1. Vue2.0

2. iView

3. eCharts

實現的功能

目前實現一些基本的信息展現和數據表格操做組件，但願之後有機會繼續增長

1. 信息總覽

2. 用戶面板

3. 工做進度

4. 時間軸

5. 天氣面板

6. 留言面板

7. 基本表格

8. 可編輯表格

9. 圖表

10. ...

全局樣式定義

全局樣式的自定義沿用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">
改: 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