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

時間 2019-11-08

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

原文原文鏈接

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

github地址：vue-framework-wzhtml

線上體驗地址：當即體驗前端

《一步步帶你作vue後臺管理框架》第一課：介紹框架vue

《一步步帶你作vue後臺管理框架》第二課：上手使用html5

《一步步帶你作vue後臺管理框架》第三課：登陸功能node

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

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

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

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

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

　　建議你們最好使用這樣的方式，cnpm老是會出現各類奇怪的bug。git

　　等到依賴安裝完成以後咱們運行程序員

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>

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

<template>
  <div class="animated fadeIn">

    <Row>
      <Col :sm="24" :md="24" :lg="12">

        <h3>框架在手，天下我有</h3>
        <p>好用的框架決定了一個程序員的效率</p>

      </Col>
    </Row>
    
  </div>
</template>

   
<script>

    export default {
        data () {
            return {
        　　　　　　　　}
      }
       
    }
</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

線上體驗地址：當即體驗