一步步帶你作vue後臺管理框架(二)——上手使用

時間 2020-03-02

標籤步步 vue 後臺管理框架上手使用简体版

原文原文鏈接

系列教程《一步步帶你作vue後臺管理框架》第二課javascript

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

　　閒扯再多不會用也沒白搭，這節課我來帶你們直接上手框架，體驗到簡單方便以後你就會愛上這個框架欲罷不能的。vue

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

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

　不管哪一種方式，只要咱們可以拿到整個代碼包就行。在咱們代碼包的根目錄下打開命令行，執行以下命令：java

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

　　建議你們最好使用這樣的方式，cnpm老是會出現各類奇怪的bug。
　　等到依賴安裝完成以後咱們運行webpack

npm run dev

　　而後在瀏覽器中輸入http://localhost:9001，就能夠直接看到咱們的主界面了。　　

　　這是一個很粗糙的首頁，咱們接下來要學習如何作一個本身的界面。
　　打開編輯器，進入到vue-framework-wz/src/views文件夾下，新建一個vue文件，名字就叫作wz.vue，而後定義好一個vue組件的dom模板，以下圖。
　　　　　　
　　咱們寫點什麼呢？先寫一個簡單標題能看到效果吧。
<template> <div class="animated fadeIn"> <h3>框架在手，天下我有</h3> <p>好用的框架決定了一個程序員的效率</p> </div></template>ios

　　若是咱們想要有自適應的效果怎麼辦？加上Row行組件和Col列組件，並設置好Col的屬性git

<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標籤，github

<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
線上體驗地址：當即體驗