一步步带你做vue后台管理框架(二)——上手使用

git clone https://github.com/herozhou/vue-framework-wz.git[/code] 
　 无论哪种方式，只要我们能够拿到整个代码包就行。在我们代码包的根目录下打开命令行，执行如下命令：

npm install --registry=https://registry.npm.taobao.org


　　建议大家最好使用这样的方式，cnpm总是会出现各种奇怪的bug。

　　等到依赖安装完成之后我们运行

npm run dev


　　然后在浏览器中输入http://localhost:9001，就可以直接看到我们的主界面了。　　


　　这是一个很粗糙的首页，我们接下来要学习如何做一个自己的界面。

　　打开编辑器，进入到vue-framework-wz/src/views文件夹下，新建一个vue文件，名字就叫做wz.vue，然后定义好一个vue组件的dom模板，如下图。


　　　　　　


　　我们写点什么呢？先写一个简单标题能看到效果吧。

框架在手，天下我有
好用的框架决定了一个程序员的效率

　　如果我们想要有自适应的效果怎么办？加上Row行组件和Col列组件，并设置好Col的属性

<template>
<div class="animated fadeIn">
<Row>
<Col :sm="12" :md="12" :lg="12">
<h3>框架在手，天下我有</h3> <p>好用的框架决定了一个程序员的效率</p>
</Col>
</Row>
</div>
</template>
<script>
export default
{  }
</script>


这样就很简单的做好了一个页面，接下来就要配置路由了，进入到vue-framework-wz/src/router/index.js文件，把我们的组件引入进来，然后在下面配置好我们的路由，如下所示。





完整index.js代码

import Vue from 'vue';
import Router from 'vue-router';
const _import = require('./_import_' + process.env.NODE_ENV);
// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
import Full from '@/containers/Full'

// Views
import Dashboard from '@/views/Dashboard'
import Charts from '@/views/Charts'

// Views - Components

import Buttons from '@/views/components/Buttons'
import HoverButtons from '@/views/components/HoverButtons'

// Views - Views
import Table from '@/views/Table'
import TableDetail from '@/views/TableDetail'
import JsonTree from '@/views/JsonTree'
import wz from '@/views/wz'

// Views - Pages
import Page404 from '@/views/pages/Page404'
import Page500 from '@/views/pages/Page500'

/* login */
const Login = _import('login/index');

/* dashboard */
/* permission */
// const Permission = _import('permission/index');

Vue.use(Router);

/**
* icon : the icon show in the sidebar
* hidden : if hidden:true will not show in the sidebar
* redirect : if redirect:noredirect will not redirct in the levelbar
* noDropdown : if noDropdown:true will not has submenu
* meta : { role: ['admin'] }  will control the page role
**/

export const constantRouterMap = [
{ path: '/login', component: Login, hidden: true },
{
path: '/pages',
redirect: '/pages/p404',
name: 'Pages',
component: {
render (c) { return c('router-view') }
// Full,
},
children: [
{
path: '404',
name: 'Page404',
component: Page404
},
{
path: '500',
name: 'Page500',
component: Page500
},
]
}

]

export default new Router({
// mode: 'history', //后端支持可开
mode: 'hash', // Demo is living in GitHub.io, so required!
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
});

export const asyncRouterMap = [
//   {
//     path: '/permission',
//     component: Layout,
//     redirect: '/permission/index',
//     name: '权限测试',
//     icon: 'quanxian',
//     meta: { role: ['admin'] },
//     noDropdown: true,
//     children: [{ path: 'index', component: Permission, name: '权限测试页', meta: { role: ['admin'] } }]
//   },

{
path: '/',
redirect: '/dashboard',
name: '首页',
component: Full,
hidden:false,
children: [
{
path: '/dashboard',
name: '介绍',
icon:'speedometer',
component: Dashboard
},
{
path: '/components',
name: '组件',
redirect: '/components/buttons',

icon:'bookmark',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'buttons',
name: '按钮',
icon:'social-youtube',
component: Buttons,
hidden:false,

},
{
path: 'hoverbuttons',
name: '悬停特效按钮',
icon:'wand',
component: HoverButtons
}
]
},

{
path: '/charts',
name: '图标',
icon:'pie-graph',
component: Charts,
},
{
path: '/table',
name: '表格',
icon:'ios-paper',
component: Table,
meta: { role: ['admin'] }
},
{
path: '/jsontree',
name: 'JSON视图',
icon:'merge',
component: JsonTree
},
{
path: '/tabledetail/:id',
name: 'TableDetail',
hidden:true,
component: TableDetail
},
{
path: '/wz',
name: 'wz',
icon:"social-html5"
component: wz
},

]
},
{ path: '*', redirect: '/pages/404', hidden: true }

];


然后打开我们的浏览器进入到http://localhost:9001/#/wz



页面就显示出来了，而且侧边栏已经自动遍历可访问的路由生成列表项了。

很方便吧？

接下来我们进阶一下，看看如何做一个表格。

首先加入Table标签，

<Table :columns="columns1" :data="data1"></Table>


再配置列和data属性：

export default {
data () {
return {
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
}
],
data1: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
]
}
},
}


这样简单的表格就做好了



怎么在表格中加入按钮呢，比如查看，删除？

这就用到vue的render函数了。

在columns1中加入一个新的属性，是一个render函数。

{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
}


如果对render函数很陌生的话，移步vue文档学习一下render函数。

然后我们加入一些功能函数，实现查看和删除功能。

methods: {
show (index) {
this.$Modal.info({
title: '用户信息',
content: `姓名：${this.data1[index].name}<br>年龄：${this.data1[index].age}<br>地址：${this.data1[index].address}`
})
},
remove (index) {
this.data1.splice(index, 1);
}
},


当我们点击查看就会出现一个对话框，点击删除就会移除这一行



后续教程内容：

*　　登录鉴权、路由、自己动手封装UI组件*

github地址：vue-framework-wz

线上体验地址：立即体验