一步步带你做vue后台管理框架(二)——上手使用
系列教程《一步步带你做 vue 后台管理框架》第二课
github 地址：vue-framework-wz
线上体验地址：立即体验
闲扯再多不会用也没白搭，这节课我来带大家直接上手框架，体验到简单方便之后你就会爱上这个框架欲罢不能的。
首先跟所有的 vue 项目一样，两种方式，一种去项目github 地址：vue-framework-wz上下载代码包到本地，或者使用
git clone https://github.com/herozhou/vue-framework-wz.git
无论哪种方式，只要我们能够拿到整个代码包就行。在我们代码包的根目录下打开命令行，执行如下命令：
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 模板，如下图。
我们写点什么呢？先写一个简单标题能看到效果吧。
<template> <div class="animated fadeIn"><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h3</span><span style="color: rgba(0, 0, 255, 1)">></span>框架在手，天下我有<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h3</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>好用的框架决定了一个程序员的效率<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span></div>
</template>
如果我们想要有自适应的效果怎么办？加上 Row 行组件和 Col 列组件，并设置好 Col 的属性
<template> <div class="animated fadeIn"><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Row</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Col </span><span style="color: rgba(255, 0, 0, 1)">:sm</span><span style="color: rgba(0, 0, 255, 1)">="24"</span><span style="color: rgba(255, 0, 0, 1)"> :md</span><span style="color: rgba(0, 0, 255, 1)">="24"</span><span style="color: rgba(255, 0, 0, 1)"> :lg</span><span style="color: rgba(0, 0, 255, 1)">="12"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h3</span><span style="color: rgba(0, 0, 255, 1)">></span>框架在手，天下我有<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h3</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>好用的框架决定了一个程序员的效率<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">Col</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">Row</span><span style="color: rgba(0, 0, 255, 1)">></span></div>
</template><script>
export </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">default</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> { data () { </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">return</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> { } } }</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); import Full from '@/containers/Full' import Buttons from '@/views/components/Buttons'// Views - Pages
import Page404 from '@/views/errorPages/Page404'
import Page500 from '@/views/errorPages/Page500'/ login /
const Login = _import('login/index');
Vue.use(Router);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: _import('errorPages/Page404') },
{path: '500',name: 'Page500',component: _import('errorPages/Page404')},
]
}]
export default new Router({
mode: 'hash',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
});export const asyncRouterMap = [
{
path: '/',
redirect: '/dashboard',
name: '首页',
component: Full,
hidden:false,
children: [
{path: '/dashboard',name: 'Dashboard',icon:'speedometer',component: _import('Dashboard')},
{path: '/introduction',name: '介绍',icon:'thumbsup',component: _import('Introduction')},
{path: '/components',name: 'component 组件',redirect: '/components/buttons',icon:'bookmark',
component: {render (c) { return c('router-view')}},
children: [ {path: 'buttons',name: 'Buttons 按钮',icon:'social-youtube',component: _import('components/Buttons'), hidden:false, },
{path: 'hoverbuttons',name: '悬停特效按钮',icon:'wand',component: _import('components/HoverButtons')},
{path: 'alert',name: 'Alert 警告提示',icon:'alert',component: _import('components/Alert')},
{path: 'card',name: 'Card 卡片',icon:'ios-browsers-outline',component: _import('components/Card')},
{path: 'datepicker',name: 'DatePicker',icon:'ios-calendar-outline',component: _import('components/DatePicker')},
{path: 'form',name: 'Form 表单',icon:'ios-list-outline',component: _import('components/Form')},
{path: 'modal',name: 'Modal 对话框',icon:'ios-chatbubble-outline',component: _import('components/Modal')},
{path: 'select',name: 'Select 选择器',icon:'ios-arrow-down',component: _import('components/Select')},
{path: 'spin',name: 'Spin 加载中',icon:'load-d',component: _import('components/Spin')},
{path: 'steps',name: 'Steps 步骤条',icon:'ios-checkmark-outline',component: _import('components/Steps')},
{path: 'timeline',name: 'Timeline 时间轴',icon:'android-more-vertical',component: _import('components/Timeline')},
{path: 'transfer',name: 'Transfer 穿梭框',icon:'ios-pause-outline',component: _import('components/Transfer')},
{path: 'timepicker',name: 'Timepicker',icon:'ios-clock-outline',component: _import('components/Timepicker')},
{path: 'upload',name: 'Upload 上传',icon:'ios-cloud-upload-outline',component: _import('components/Upload')},
]
},
{path: '/charts',name: 'echart 图表',redirect: '/charts/shopchart',icon:'pie-graph',
component: {render (c) { return c('router-view')}},
children: [ {path: 'shopchart',name: '商场统计图表',icon:'stats-bars',component: _import('charts/ShopChart'), hidden:false, },
{path: 'radarchart',name: '雷达图',icon:'arrow-graph-up-right',component: _import('charts/RadarChart')},
{path: 'cakechart',name: '蛋糕销量图表',icon:'ios-analytics',component: _import('charts/CakeChart')}
]
},
{path: '/table', name: '表格综合实例',icon:'ios-paper',component: _import('Table'),meta: { role: ['admin'] }},
{path: '/jsontree', name: 'JSON 视图',icon:'merge',component: _import('JsonTree')},
{path: '/tabledetail/:id',name: 'TableDetail', hidden:true, component: _import('TableDetail')},
{path: '/tinymce',name: 'Tinymce 编辑器',icon:"android-document",component: _import('Tinymce')},
{path: '/markdown',name: 'Markdown',icon:"android-list",component: _import('Markdown')},
{path: '/wz',name: 'WZ',icon:"social-html5",component: _import('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);} },
当我们点击查看就会出现一个对话框，点击删除就会移除这一行
大家有什么问题最好去我 github 提 issues，文章评论评论较长时间才查看一次。
接下来的教程讲一下封装 UI 组件、router、webpack、node 命令行构建工具等内容。
希望大家看了这系列教程都能制作出自己的前端框架，从而在工作中得心应手。
如果喜欢就点个 start 鼓励下作者吧。
github 地址：vue-framework-wz
线上体验地址：立即体验