正文

一步步带你做vue后台管理框架——上手使用

herozhou工巧  herozhou工巧  2022-09-18  529

关键词：

系列教程《一步步带你做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后台管理框架——介绍框架

系列教程《一步步带你做vue后台管理框架》第一课github地址：vue-framework-wz线上体验地址：立即体验　　在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框架，日常的工作中会有太多重复的内容加重我们程序... 查看详情

vue带你快速上手vue3-使用-compositionapi-响应式原理-新特性(代码片段)

文章目录一、简介1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性二、创建一个Vue项目1.使用vue-cli创建2.使用vite创建三、分析文件目录main.jsApp.vue四、CompositionAPI1.OptionsAPI存在的问题2.CompositionAPI的优势3.常用的CompositionAPI①拉开... 查看详情

带你一步步剖析retrofit源码解析：一款基于okhttp实现的网络请求框架(代码片段)

OkHttp与Retrofit的区别与联系是怎样的？参考答案：OkHttp和Retrofit都是目前流行网络开源框架封装不同：Retrofit封装了具体的请求，线程切换以及数据转换。retrofit通过使用代理，外观，策略模式对okhttp进行了封装OkHttp是基于Http协议... 查看详情

快速上手ssm项目(代码片段)

...的童鞋3.要求明白如何进行dao、service、controller的开发一步步带你学会如何快速搭建ssm框架及项目的避坑一.搭建SSM框架打开IDEA，使用Maven创建一个webapp项目PS：创建项目名称确认为maven-archetype-webapp在pom.xml引入所需依赖在properties... 查看详情

关于vue项目管理项目的架构管理平台(代码片段)

...浏览完整项目地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带你用vue撸后台系列三(实战查看详情

带你一步步搭建web自动化测试框架

测试框架的设计有两种思路，一种是自底向上，从脚本逐步演变完善成框架，这种适合新手了解框架的演变过程。另一种则是自顶向下，直接设计框架结构和选取各种问题的解决方案，这种适合有较多框架事... 查看详情

vue后台管理项目---icon篇

...关于使用和选择图标，大家可以参考这篇文章：手摸手，带你优雅的使用icon-掘金，我在项目中用的是vue-fontawesome2.文档写的很详细，大家一看就明白了，文档：https://github.com/FortAwesome/vue-fontawesome，官网：Icons|FontAwesome3.如果... 查看详情

手摸手，带你用vue撸后台系列三(实战篇)

前言在前面两篇文章中已经把基础工作环境构建完成，也已经把后台核心的登录和权限完成了，现在手摸手，一起进入实操。Element去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen，那时候vue2刚发没多久，市面上... 查看详情

郭大婶带你一步步深入了解view系列

...f0c;方便后边再温故AndroidLayoutInflater原理分析，带你一步步深入了解View(一)Android视图绘制流程完全解析，带你一步步深入了解View(二)Android视图状态及重绘流程分析，带你一步步深入了解View(三)Android自定义View的实现方... 查看详情

用vue.js开发企业管理后台，我做到了

Vue.js是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，它可以自底向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有的项目整合。当与现代化的工具链及各种支持... 查看详情

一步步开发网站系列-网站界面

经历3年左右的积累，一个人完成了一个专业考试社区网站。先上图，以后有时间慢慢讲解技术实现，供大家学习。网站地址www.zyldingfang.com 这是我的官网首页这是我集成的第三方社区BBS系统叫WeCenter这是我使用jqueryea... 查看详情

手摸手，带你用vue撸后台系列一

前言说好的教程终于来了，第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧，但这里不会教你webpack的基础配置，热更新怎么做，webpack速度优化等等，有需求的请自行google。目录结构├──build//构建相关├──con... 查看详情

游戏公司cto带你做万能游戏框架进阶就业班

课程大纲第一章万能框架设计模式设计模式工厂模式设计模式策略模式设计模式观察者模式设计模式单例模式互动答疑第二章设计模式代理模式设计模式门面模式设计模式&nb... 查看详情

一步步搭建现代前端框架

前言：因为最近正在做前端开发，发现公司里面用的都是vue了。反而最原始的html+css+js这种已经很少见了。有时候自己会做一些练习的小项目，如果按照vue脚手架来一遍的话，不仅搭建起来需要各种插件，而且项目打包出来后不... 查看详情

vue3+vite+ts+antdv搭建后台管理基础框架

参考技术A最近公司官网需要一个后台管理系统，一直在看vue3，但是都没有在实际项目中使用过，正好就借此机会来踩踩坑。点击这里查看源码Vite中文网(vitejs.cn)Vite需要Node.js版本>=12.0.0启动项目的第一感觉就是一个字快，还没... 查看详情

vue2.x实战之后台管理系统开发(代码片段)

2.开发前须知我的后台管理系统项目运用了如下框架/插件：Vue2.x——项目所使用的js框架，我所使用的版本是：2.1.10vue-router2——Vue2.x配套路由，我所使用的版本是：2.3.0Element——UI框架，饿了么出品，我所使用的版本是：1.2.8Echa... 查看详情

2018年最新-java大神带你做年薪过50万的架构师

一.作为企业架构师，我们为什么需要构建数据结构？数据结构主要有以下内容：1）数据标准不一致　　2）数据模型管理混乱　　3）深入的性能的问题无法解决　　4）SQL语句编写水平不高导致出现严重性能问题　　5）开发人员... 查看详情

一款laravel9+vue+elementui后台管理框架

...分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，为了敏捷快速开发，提升研发效率，框架... 查看详情