I wrote a management background called VUe-Manager

The default theme follows vUE’s official theme green, and the logo design is simply deformed into the shape of M using VUE’s official logo.

Hope to help users quickly build Vue2.0 based management background.

Project address github.com/luosijie/vu…

IO/VUE-manager

The installation

Install Node/NPM (CNPM)
Git clone “github.com/luosijie/vu…”
cpm install
pm run dev
Access localhost: 8080

Implemented functions

We are currently implementing some basic information presentation and data table manipulation components and hope to continue to add in the future

The overview information
User panel
Work progress
The timeline
The weather badge
Message panel
The basic form
Editable table
The chart
.

Components use

Each component has a complete UI style and basic interaction, and the consumer only needs to bind data outside the component

For example,

See the props properties in the Demo(Src directory of the project folder) and vM-component for details on how to use each component

<VmProgress title=" work progress ":data="dataProgress"></VmProgress>... Export default {data: function () {return dataProgress: [{name: 'Jesse Luo', tags: [' very nice ', 'very nice '], value: 90}, {name: 'Angla Cool, tags: [' beautiful' and 'emotional', 'art'], value: 30}, {name: "lele Wang ', tags: [' quality ', 'bad'], value: 80}, {name: 'Jesse Ca, tags: [' genius',' hard ', 'learned'], value: 20}, {name: 'Jesse Lee, tags: [' handsome', 'cool'], value: 100}],}}Copy the code

vm-timeline

<VmTimeline :data="dataTimeline"></VmTimeline> ... Export default {data: function () {return {dataTimeline: [{date: '2017年7月15日', time: '8:35am ', content: 'Lorem ipsum Dolor sit amet consiquest dio'}, {date: 'jul 15 2017 ', time:' 8:35am ', content: 'Lorem ipsum Dolor sit amet consiquest dio'}, {date: 'jul 15 2017 ', time:' 8:35am ', content: 'Lorem ipsum Dolor sit amet consiquest dio'}, {date: 'jul 15 2017 ', time:' 8:35am ', content: 'Lorem ipsum Dolor sit amet consiquest dio'}, {date: 'jul 15 2017 ', time:' 8:35am ', content: 'Lorem ipsum dolor sit amet consiquest dio' } ] } } }Copy the code

vm-chart-bar-line

<VmChartBarLine title=" 2d histogram ":xAxisData=" databar2. xAxisData" :series=" databar2. series"> </VmChartBarLine>... Export default {data: function () {return {dataBar2: {xAxisData: [' shirt ', 'sweater ',' chiffon ', 'pants ',' heels ', 'socks '], series: [{name: 'volume ', type: 'bar', data: [50, 200, 360, 100, 100, 200]}, {name:' volume ', type: 'bar', data: [50, 200, 360, 100, 100, 200] [5, 20, 36, 10, 10, 20]}]},}}Copy the code

vm-table

The editable mode of VM-table can be used to add, delete, and modify data

v-on:add-ok=”add”

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

To implement the

<VmTable title=" editable table "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: 'id', key: 'id'}, {title: 'id', key: 'name'}, {title: 'id'}, data: function () {return {title: 'id', key: 'name'}, {title: 'id', key: 'name'}, {title: 'age', key: 'age'}, {title: 'address', key: 'address'}], dataTable: [{id: '65416s843154', name: 'Wang Xiaolin ', age: 18, address: 'Shaoyaoju, Chaoyang District'}, {id: '6541684q6534', name: 'Zhang Xiaogang ', age: 25, address:' Xierqi, Haidian District '},... {id: Address: 'Shennan Avenue, Nanshan District, Shenzhen'}]}}}Copy the code

That’s it. Welcome star