系列教程《一步步带你做vue后台管理框架》第二课

github地址:vue-framework-wz

线上体验地址:立即体验

《一步步带你做vue后台管理框架》第一课:介绍框架

《一步步带你做vue后台管理框架》第二课:上手使用

《一步步带你做vue后台管理框架》第三课:登录功能

  闲扯再多不会用也没白搭,这节课我来带大家直接上手框架,体验到简单方便之后你就会爱上这个框架欲罢不能的。

  首先跟所有的vue项目一样,两种方式,一种去项目github地址:vue-framework-wz上下载代码包到本地,或者使用

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

  无论哪种方式,只要我们能够拿到整个代码包就行。在我们代码包的根目录下打开命令行,执行如下命令:

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

  建议大家最好使用这样的方式,cnpm总是会出现各种奇怪的bug。

  等到依赖安装完成之后我们运行

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

线上体验地址:立即体验

一步步带你做vue后台管理框架(二)——上手使用的更多相关文章

  1. 一步步带你做vue后台管理框架(一)——介绍框架

    系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框 ...

  2. 一步步带你做vue后台管理框架(三)——登录功能

    系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 ...

  3. 一步步带你做vue后台管理框架

    1.登录 (1).  一步步带你做vue后台管理框架(三)——登录功能 2.权限控制 (1)  基于Vue2.0实现后台系统权限控制 (2) 手摸手,带你用vue撸后台 系列二(登录权限篇)

  4. vue后台管理框架

    vue后台管理框架 系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写 ...

  5. 从壹开始前后端 [vue后台] 之二 || 完美实现 JWT 滑动授权刷新

    缘起 哈喽大家周一好!不知道小伙伴们有没有学习呀,近来发现各种俱乐部搞起来了,啥时候群里小伙伴也搞一次分享会吧,好歹也是半千了(时间真快,还记得5个月前只有20多人),之前在上个公司,虽然也参与组织过 ...

  6. Vue+ElementUI的后台管理框架

    新开发的一个后台管理系统.在框架上,领导要用AdminLTE这套模板.这个其实很简单,把该引入的样式和js文件引入就可以了.这里就不多赘述了.有兴趣的可以参考:https://www.jianshu. ...

  7. fastadmin 后台管理框架使用技巧(持续更新中)

    fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...

  8. VUE 后台管理系统权限控制

    谈一谈VUE 后台管理系统权限控制 前端权限从本质上来讲, 就是控制视图层的展示,比如说是某个页面或者某个按钮,后端权限可以控制某个用户是否能够查询数据, 是否能够修改数据等操作,后端权限大部分是基于 ...

  9. 一步一步带你实现virtual dom(二) -- Props和事件

    很高兴我们可以继续分享编写虚拟DOM的知识.这次我们要讲解的是产品级的内容,其中包括:设置和DOM一致性.以及事件的处理. 使用Babel 在继续之前,我们需要弥补前一篇文章中没有详细讲解的内容.假设 ...

随机推荐

  1. 51. leetcode 530. Minimum Absolute Difference in BST

    530. Minimum Absolute Difference in BST Given a binary search tree with non-negative values, find th ...

  2. Ubuntu下安装codeblocks

    ubuntu 16.04LTS 下Code::Blocks 16.01 安装 Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件. ...

  3. JPA常用注解

    JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中.        JPA由EJB 3.0软件专家 ...

  4. Intger To Roman

    这题意思是将一个输入的整型阿拉伯数字转化为罗马数字. 思路是将1-10对应的罗马数字放在字符串数组里,然后发现数据变化规律即可,eg:389 = 300 + 89 +9 分别对应的罗马数字. publ ...

  5. 电机PID调试注意(待补充)

    1.速度传感器 返回值要处理好,要和目标值同一单位,这样方便以后的计算 2.PID初始化要准确 3.输出给定要设定一个阈值,防止电机转速太大.

  6. Unity 坐标 转换 详解 World世界坐标 Screen屏幕坐标 View视口坐标 GUI坐标 NGUI坐标 localPosition相对父级坐标

    在制作游戏中我们经常会遇到这样一个需求: 在人物模型的上面显示 名字.称号 一类的文字或者图片 如下图 人物模型属于是Camera1   UI Title信息属于NGUI Camera2 如下图 这时 ...

  7. MySQL连接问题【如何解决MySQL连接超时关闭】

    --MySQL连接问题[如何解决MySQL连接超时关闭] ------------------------------------------------转载 最近做网站有一个站要用到WEB网页采集器 ...

  8. python练习题一

    1.使用while循环输出1 2 3 4 5 6     8 9 10 答:i=0 while i<10:     i += 1     if i!=7:         print(i) 2. ...

  9. 【环境搭建】使用Jekyll搭建Github博客

    前言 昨天花了差不多一天的时间,使用Jekyll搭建起了一套Github博客,感觉不错,也特将搭建过程记录下来,方便有需要的朋友自行搭建. 搭建步骤 本环境是在Linux环境下搭建完成的 安装前建议使 ...

  10. php 单引号,双引号,反引号区别

    PHP中单引号,双引号,反引号具有不同的含义,最大的几项区别如下: 一.单引号中,任何变量($var).特殊转义字符(如"\t \r \n"等)不会被解析,因此PHP的解析速度更快 ...