摘要：系列教程一步步帶你做后臺管理框架第二課地址線上體驗地址立即體驗閑扯再多不會用也沒白搭，這節(jié)課我來帶大家直接上手框架，體驗到簡單方便之后你就會愛上這個框架欲罷不能的。在中加入一個新的屬性，是一個函數(shù)。

系列教程《一步步帶你做vue后臺管理框架》第二課

github地址：vue-framework-wz
線上體驗地址：立即體驗

　　閑扯再多不會用也沒白搭，這節(jié)課我來帶大家直接上手框架，體驗到簡單方便之后你就會愛上這個框架欲罷不能的。

　　首先跟所有的vue項目一樣，兩種方式，一種去項目github地址：vue-framework-wz上下載代碼包到本地，或者使用

git clone https://github.com/herozhou/vue-framework-wz.git

?　 無論哪種方式，只要我們能夠拿到整個代碼包就行。在我們代碼包的根目錄下打開命令行，執(zhí)行如下命令：

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

　　建議大家最好使用這樣的方式，cnpm總是會出現(xiàn)各種奇怪的bug。
　　等到依賴安裝完成之后我們運行

npm run dev

　　然后在瀏覽器中輸入http://localhost:9001，就可以直接看到我們的主界面了。　　
?
　　這是一個很粗糙的首頁，我們接下來要學(xué)習(xí)如何做一個自己的界面。
　　打開編輯器，進入到vue-framework-wz/src/views文件夾下，新建一個vue文件，名字就叫做wz.vue，然后定義好一個vue組件的dom模板，如下圖。
　　　　　　
　　我們寫點什么呢？先寫一個簡單標(biāo)題能看到效果吧。

?
　　如果我們想要有自適應(yīng)的效果怎么辦？加上Row行組件和Col列組件，并設(shè)置好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: "權(quán)限測試",
//     icon: "quanxian",
//     meta: { role: ["admin"] },
//     noDropdown: true,
//     children: [{ path: "index", component: Permission, name: "權(quán)限測試頁", 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: "圖標(biāo)",
          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

頁面就顯示出來了，而且側(cè)邊欄已經(jīng)自動遍歷可訪問的路由生成列表項了。
很方便吧？
接下來我們進階一下，看看如何做一個表格。
首先加入Table標(biāo)簽，

?
再配置列和data屬性：

 export default {
        data () {
            return {
               columns1: [
                    {
                        title: "姓名",
                        key: "name"
                    },
                    {
                        title: "年齡",
                        key: "age"
                    },
                    {
                        title: "地址",
                        key: "address"
                    }
                ],
                data1: [
                    {
                        name: "王小明",
                        age: 18,
                        address: "北京市朝陽區(qū)芍藥居"
                    },
                    {
                        name: "張小剛",
                        age: 25,
                        address: "北京市海淀區(qū)西二旗"
                    },
                    {
                        name: "李小紅",
                        age: 30,
                        address: "上海市浦東新區(qū)世紀(jì)大道"
                    },
                    {
                        name: "周小偉",
                        age: 26,
                        address: "深圳市南山區(qū)深南大道"
                    }
                ]
            }
        },
      }

?
這樣簡單的表格就做好了

怎么在表格中加入按鈕呢，比如查看，刪除？
這就用到vue的render函數(shù)了。

在columns1中加入一個新的屬性，是一個render函數(shù)。

{
                        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函數(shù)很陌生的話，移步vue文檔學(xué)習(xí)一下render函數(shù)。

然后我們加入一些功能函數(shù)，實現(xiàn)查看和刪除功能。

  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);
            }
        },

?
當(dāng)我們點擊查看就會出現(xiàn)一個對話框，點擊刪除就會移除這一行
?

后續(xù)教程內(nèi)容：
　　登錄鑒權(quán)、路由、自己動手封裝UI組件

github地址：vue-framework-wz
線上體驗地址：立即體驗
?