一步步带你做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模板，如下图。
　　　　　　
　　我们写点什么呢？先写一个简单标题能看到效果吧。

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

 
 
这样就很简单的做好了一个页面，接下来就要配置路由了，进入到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标签，

 
再配置列和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}
年龄：${this.data1[index].age}
地址：${this.data1[index].address}`
                })
            },
            remove (index) {
                this.data1.splice(index, 1);
            }
        },

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

后续教程内容：
　　登录鉴权、路由、自己动手封装UI组件

github地址：vue-framework-wz
线上体验地址：立即体验