系列教程《一步步帶你做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，就可以直接看到我們的主界面了伪煤。
這是一個很粗糙的首頁加袋，我們接下來要學(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)
