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

系列教程《一步步帶你做vue后臺管理框架》第二課
github地址:vue-framework-wz
線上體驗(yàn)地址:立即體驗(yàn)

《一步步帶你做vue后臺管理框架》第一課:介紹框架
《一步步帶你做vue后臺管理框架》第二課:上手使用
《一步步帶你做vue后臺管理框架》第三課:登錄功能

閑扯再多不會用也沒白搭鸳粉,這節(jié)課我來帶大家直接上手框架再扭,體驗(yàn)到簡單方便之后你就會愛上這個框架欲罷不能的脆诉。
  首先跟所有的vue項(xiàng)目一樣

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

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

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

建議大家最好使用這樣的方式未荒,cnpm總是會出現(xiàn)各種奇怪的bug妈倔。

等到依賴安裝完成之后我們運(yùn)行

npm run dev

然后在瀏覽器中輸入http://localhost:9001,就可以直接看到我們的主界面了伪煤。

wz-index

這是一個很粗糙的首頁加袋,我們接下來要學(xué)習(xí)如何做一個自己的界面。

打開編輯器带族,進(jìn)入到vue-framework-wz/src/views文件夾下锁荔,新建一個vue文件,名字就叫做wz.vue蝙砌,然后定義好一個vue組件的dom模板,如下圖跋理。

      

 
我們寫點(diǎn)什么呢择克?先寫一個簡單標(biāo)題能看到效果吧。

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

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

如果我們想要有自適應(yīng)的效果怎么辦肚邢?加上Row行組件和Col列組件,并設(shè)置好Col的屬性

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

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

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

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

   
<script>

    export default {
        data () {
            return {
                }
      }
       
    }
</script>

這樣就很簡單的做好了一個頁面骡湖,接下來就要配置路由了,進(jìn)入到vue-framework-wz/src/router/index.js文件峻厚,把我們的組件引入進(jìn)來响蕴,然后在下面配置好我們的路由,如下所示惠桃。

完整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: '商場統(tǒng)計(jì)圖表',icon:'stats-bars',component: _import('charts/ShopChart'), hidden:false, },
                    {path: 'radarchart',name: '雷達(dá)圖',icon:'arrow-graph-up-right',component: _import('charts/RadarChart')},
                    {path: 'cakechart',name: '蛋糕銷量圖表',icon:'ios-analytics',component: _import('charts/CakeChart')}
                  ]
      },
      {path: '/table', name: '表格綜合實(shí)例',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 }
  
];

然后打開我們的瀏覽器進(jìn)入到http://localhost:9001/#/wz

頁面就顯示出來了浦夷,而且側(cè)邊欄已經(jīng)自動遍歷可訪問的路由生成列表項(xiàng)了。

很方便吧辜王?
接下來我們進(jìn)階一下劈狐,看看如何做一個表格。
首先加入Table標(biāo)簽呐馆,

<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: '北京市朝陽區(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ù),實(shí)現(xiàn)查看和刪除功能炮车。

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

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

大家有什么問題最好去我github提issues,文章評論評論較長時間才查看一次瘦穆。

接下來的教程講一下封裝UI組件纪隙、router、webpack扛或、node命令行構(gòu)建工具等內(nèi)容绵咱。
希望大家看了這系列教程都能制作出自己的前端框架,從而在工作中得心應(yīng)手熙兔。
如果喜歡就點(diǎn)個start鼓勵下作者吧悲伶。

github地址:vue-framework-wz
線上體驗(yàn)地址:立即體驗(yàn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市住涉,隨后出現(xiàn)的幾起案子麸锉,更是在濱河造成了極大的恐慌,老刑警劉巖舆声,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件花沉,死亡現(xiàn)場離奇詭異,居然都是意外死亡媳握,警方通過查閱死者的電腦和手機(jī)碱屁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蛾找,“玉大人娩脾,你說我怎么就攤上這事∫钢啵” “怎么了晦雨?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長隘冲。 經(jīng)常有香客問我闹瞧,道長,這世上最難降的妖魔是什么展辞? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任奥邮,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘洽腺。我一直安慰自己脚粟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布蘸朋。 她就那樣靜靜地躺著核无,像睡著了一般。 火紅的嫁衣襯著肌膚如雪藕坯。 梳的紋絲不亂的頭發(fā)上团南,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音炼彪,去河邊找鬼吐根。 笑死,一個胖子當(dāng)著我的面吹牛辐马,可吹牛的內(nèi)容都是我干的拷橘。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼喜爷,長吁一口氣:“原來是場噩夢啊……” “哼冗疮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起檩帐,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤赌厅,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后轿塔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡仲墨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年勾缭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片目养。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡俩由,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出癌蚁,到底是詐尸還是另有隱情幻梯,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布努释,位于F島的核電站碘梢,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏伐蒂。R本人自食惡果不足惜煞躬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恩沛,春花似錦在扰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至搅裙,卻和暖如春皱卓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呈宇。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工好爬, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人甥啄。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓存炮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蜈漓。 傳聞我的和親對象是個殘疾皇子穆桂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容