Vue2项目练手——通用后台管理项目第三节

最新推荐文章于 2024-11-12 23:16:45 发布
最新推荐文章于 2024-11-12 23:16:45 发布
阅读量653 收藏 1
点赞数 1
分类专栏： 前端 Vue基础 文章标签： html css3 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/132586698
版权

Vue2项目练手——通用后台管理项目

首页组件布局

个人信息展示

使用的组件

  1. Layout布局
    在这里插入图片描述
  2. Card卡片
    在这里插入图片描述

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style lang="less">
html,body,h3,p{
  padding: 0;
  margin: 0;
}
</style>

Home.vue

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/user.webp" alt="">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录的时间：<span>2023-08-30</span></p>
            <p>上次登录的地点：<span>北京</span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "Home",
}
</script>

<style scoped lang="less">
.user{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  img{
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo{
    .name{
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access{
      color: #999;
    }
  }
}
.login-info{
  p{
    line-height: 28px;
    font-size: 14px;
    color: #999;
    span{
      color: #666;
      margin-left: 60px;
    }
  }
}
</style>

在这里插入图片描述

列表信息展示

使用的组件

在这里插入图片描述

Home.vue

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/user.webp" alt="">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录的时间：<span>2023-08-30</span></p>
            <p>上次登录的地点：<span>北京</span></p>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;height: 460px;">
          <el-table
              :data="tableData"
              style="width: 100%;">
            <el-table-column v-for="(val,key) in tableLabel" :prop="key" :label="val" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      tableData:[
        {
          name: 'oppo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: 'vivo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '苹果',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '小米',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '三星',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '魅族',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        }
      ],
      tableLabel:{
        name:'课程',
        todayBuy:'今日购买',
        monthBuy:'本月购买',
        totalBuy:'总共购买'
      }
    }
  }
}
</script>

<style scoped lang="less">
.user{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  img{
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo{
    .name{
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access{
      color: #999;
    }
  }
}
.login-info{
  p{
    line-height: 28px;
    font-size: 14px;
    color: #999;
    span{
      color: #666;
      margin-left: 60px;
    }
  }
}
</style>

在这里插入图片描述

订单统计

Home.vue

<el-col :span="16">
        <div class="num">
          <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
            <div class="detail">
              <p class="price">￥{{item.value}}</p>
              <p class="desc">{{item.name}}</p>
            </div>
          </el-card>
        </div>
      </el-col>

.num{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon{
    width: 80px;
    height: 80px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
  }
  .detail{
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .price{
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
    }
    .desc{
      color: #999;
      font-size: 14px;
      text-align: center;
    }
  }
  .el-card{
    margin-bottom: 20px;
    width: 32%;
  }
}

全部代码：

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/user.webp" alt="">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录的时间：<span>2023-08-30</span></p>
            <p>上次登录的地点：<span>北京</span></p>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;height: 460px;">
          <el-table
              :data="tableData"
              style="width: 100%;">
            <el-table-column v-for="(val,key) in tableLabel" :prop="key" :label="val" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div class="num">
          <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
            <div class="detail">
              <p class="price">￥{{item.value}}</p>
              <p class="desc">{{item.name}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      tableData:[
        {
          name: 'oppo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: 'vivo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '苹果',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '小米',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '三星',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '魅族',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        }
      ],
      tableLabel:{
        name:'课程',
        todayBuy:'今日购买',
        monthBuy:'本月购买',
        totalBuy:'总共购买'
      },
      countData:[
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    }
  }
}
</script>

<style scoped lang="less">
.user{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  img{
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo{
    .name{
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access{
      color: #999;
    }
  }
}
.login-info{
  p{
    line-height: 28px;
    font-size: 14px;
    color: #999;
    span{
      color: #666;
      margin-left: 60px;
    }
  }
}
.num{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon{
    width: 80px;
    height: 80px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
  }
  .detail{
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .price{
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
    }
    .desc{
      color: #999;
      font-size: 14px;
      text-align: center;
    }
  }
  .el-card{
    margin-bottom: 20px;
    width: 32%;
  }
}
</style>

在这里插入图片描述

数据的请求

axios的基本使用

axios中文文档

二次封装

下载axios

npm i axios

在这里插入图片描述

文件目录

在这里插入图片描述

src/api/index.js
import http from "@/utils/request";

//请求首页数据
export const getData=()=>{
    //返回一个promise对象
    return http.get('/home/getData')
}
src/utils/request.js
import axios from "axios";

const http=axios.create({
    //通用请求的地址前缀
    baseURL:'/api',
    timeout: 10000 //超时时间
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default http
Home.vue
<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/user.webp" alt="">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录的时间：<span>2023-08-30</span></p>
            <p>上次登录的地点：<span>北京</span></p>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;height: 460px;">
          <el-table
              :data="tableData"
              style="width: 100%;">
            <el-table-column v-for="(val,key) in tableLabel" :prop="key" :label="val" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div class="num">
          <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
            <div class="detail">
              <p class="price">￥{{item.value}}</p>
              <p class="desc">{{item.name}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import {getData} from "@/api";
export default {
  name: "Home",
  data(){
    return{
      tableData:[
        {
          name: 'oppo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: 'vivo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '苹果',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '小米',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '三星',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '魅族',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        }
      ],
      tableLabel:{
        name:'课程',
        todayBuy:'今日购买',
        monthBuy:'本月购买',
        totalBuy:'总共购买'
      },
      countData:[
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    }
  },
  mounted(){
    getData().then((data)=>{
      console.log(data)
    })
  }
}
</script>

<style scoped lang="less">
.user{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  img{
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo{
    .name{
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access{
      color: #999;
    }
  }
}
.login-info{
  p{
    line-height: 28px;
    font-size: 14px;
    color: #999;
    span{
      color: #666;
      margin-left: 60px;
    }
  }
}
.num{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon{
    width: 80px;
    height: 80px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
  }
  .detail{
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .price{
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
    }
    .desc{
      color: #999;
      font-size: 14px;
      text-align: center;
    }
  }
  .el-card{
    margin-bottom: 20px;
    width: 32%;
  }
}
</style>

在这里插入图片描述

VillanelleS
关注
专栏目录
手把手教Vue+elementUI搭建后台管理系统（一）：项目介绍
xiaoge_586的博客
09-09 1771
####项目介绍 基本介绍 使用 vue 以及 element-ui 搭建一个 后台管理系统的项目框架，为了方面后续vue项目的开发，可以达到拿来即用的效果。主要涉及到内容包含：项目开发环境安装及配置、elementui的使用；cookie、axios、mock等封装处理；i18n国际化；vuex状态管理；vue-router路由管理；axios、router、业务代码等模块化封装；vue-router动态路由加载；常用组件封装步骤及封装思想等。 软件及技术 开发工具： HBuilderX 、Visual
手把手教你后台管理系统开发（Vue实战）
2301_76720304的博客
04-26 3115
在此篇文章中，我们介绍了开发后台管理系统的基本流程，并使用了Vue.js和Express以及相关的组件和库来完成这个项目。通过实践，我们可以更加深入地了解这个领域，并且提高Web开发的水平。2023最新 轻松快速学会 后台管理系统开发+Vue实战 从搭建到项目使用 学完即可兼职做项目_哔哩哔哩_bilibili。
使用Vue 2 + Element UI搭建后台管理系统框架实战教程
qq_42072014的博客
07-01 2981
通过上述步骤，我们构建了一个基于Vue 2和Element UI的后台管理系统框架。这个框架提供了基础的页面布局、路由管理、组件使用、状态管理及响应式设计等核心功能。实际开发中，还需根据具体需求，进一步细化功能模块，优化用户体验，集成后端API，实现数据的CRUD操作，以及考虑安全性、性能优化等方面，以构建出既美观又实用的后台管理系统。
开源项目推荐-vue2+element+axios 个人财务管理系统
肥晨开发的学习之路
06-17 6480
vue2+element+axios 个人财务管理系统是基于 vue2+element+axios 等主流技术栈构建的免费开源的后台管理前端模板。
(vue)适合后台管理系统开发的前端框架
nyf_unknow的博客
03-05 2677
文档地址：https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html。文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/
Vue2项目练手——通用后台管理项目第一节
qq_34306228的博客
08-26 1619
有时候会出现版本不一致不能运行的情况。先vue create创建一个项目，然后安装element-ui组件和vue-router,less等组件 main.js pages/Users.vue pages/Main.vue pages/Home.vue pages/Login.vue App.vue App.vue CommonAside src/pages/Mall.vue src/pages/pageOne.vue src/pages/PageTwo.vue src/com
Vue2项目练手——通用后台管理项目第四节
qq_34306228的博客
09-01 1175
mock官方文档 前端用来模拟后端接口的工具，通过拦截前端发起的请求，自己定义一些数据 src/api/mockServeData/home.js main.js 安装echarts 柱状图: 饼状图 全部代码：
Vue2项目练手——通用后台管理项目第五节
qq_34306228的博客
09-01 1653
src/components/CommonAside.vue src/components/CommonHeader.vue Main.vue 全部代码： tabs.js 全部代码：
Vue2项目练手——通用后台管理项目第二节
qq_34306228的博客
08-30 885
路由重复跳转会出现bug 解决路由重复bug问题： CommonAside.vue 顶部header组件搭建与样式修改 右边用户菜单栏 使用的组件 store/tab.js main.js CommonHeader.vue CommonAside.vue Main.vue
Java大型企业级练手项目——尚医通【视频+文档+代码】
wshyb0314的博客
01-04 1534
项目后端技术栈，采用主流的SpringBoot+SpringCloud微服务架构，广泛使用了目前流行的NoSQL技术，使用Redis缓存数据，使用MongoDB实现高并发读写，整合消息中间件RabbitMQ提高订单的并发量，同时还整合了定时任务，实现就医提醒功能，综合应用了阿里云OSS，短信服务以及微信登录、微信支付，同时增加了微信退款功能。如果你已经学完 SpringBoot、微服务的大致的知识，可以把这个项目作为第一个微服务的练手项目，学习技术的整合运用、接触更多的业务场景。
springboot+vue练手级项目，真实的在线博客系统
m0_67266171的博客
03-08 1160
文章目录 spring boot 练手实战项目说明 基础知识 面试准备 1. 工程搭建 1.1 新建maven工程 1.1.2遇到的bug 1.2 配置 1.3 启动类 2. 首页-文章列表 2.1 接口说明 2.2 编码 2.2.0 Spring—基于注解开发 2.2.1 表结构 entity层 2.2.2 Controller 2.2.3 Service 2.2.3.0 解决mapper爆红 2.2.3.1mybatisplus遇到多表查询怎么办 2.2.3.2创建文件夹时遇到的坑
vue项目实战(移动端)
m0_65769258的博客
04-16 6576
相关资料# vue-cli脚手架:vue2脚手架 vue3脚手架:vite vue官网: [介绍 — Vue.js vscode插件 vetur 必备工具 vue-helper 一些辅助功能 Vue VSCode Snippets 片段 (一) 创建项目# 01 安装vue-cli脚手架# npm install -g @vue/cli 02 查看vue脚手架版本# 出现版本号表示成功 vue --version 03 创建一个新项目# 创建项目 vue ..
合肥工业大学第六届“互联网+”大学生创新创业大赛项目计划书：AI云学习 —— 一款基于Spark构建知识图谱的人工智能学习工具
热门推荐
u25th_engineer的博客
08-11 4万+
项 目 名 称： AI云学习 —— 一款基于Spark构建知识图谱的人工智能学习工具 项 目 类 型： “互联网+”信息技术服务业 项 目 负责人： 文华 高     校： 合肥工业大学（宣城校区） 院     系： 计算机与信息系（宣城校区） 申 报 日 期： 2020年7月19日 文章目录1 项目概述1.1 研发背景1.2 产品概况1.3 市场优势1.4 市场预期1.5 销售预期1.6 融资方式2 产品服务与创意2.1
还在为没有项目经验进不了大厂而烦恼吗？六大电商Java开发项目分享，有哪些值得推荐的 Java 练手项目？（第三天）
m0_60720143的博客
09-02 1867
大家好 我收集整理了大量Java项目，当然后面会持续更新Java相关Java分享给大家。 下面大概整理了超过50个Java项目，前后端分离的 单机应用 微服务版本，应该是非常全面的了，今天分享第三部分的内容，后续会每天更新。 注：本文内容选自开源项目，内容比较丰富，帮助大家找到合适的项目，可以省不少时间。欢迎收藏点赞 不断收集整理，汇总项目，方便缺项目的朋友查找，希望对你有帮助！还缺哪些项目，欢迎留言，后续不断补充。 电商类： 一、这个高仿小米商城项目，拿来学习再好不过了！ 今天推荐一个...
使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景
zhaoshanshan168的博客
11-09 576
通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。1. **树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。4. **彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。### HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页。2. **树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。3. **装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
【css】html里面的图片宽度设为百分比，高度要与宽度一样
smart_dream
11-12 114
外层div的宽度自适应，图片宽度不能固定数值，只能设置百分比。图片高度也不能设置固定数值。如何让图片的高度与图片的宽度一样呢？场景：展示图片列表的时候，原始图片宽高不一致。
使用HTML、CSS和JavaScript创建动态圣诞树
不迁怒，不贰过。小知识，大智慧。
11-10 1022
随着节日的临近，许多人开始装饰他们的家，以迎接温馨的节日气氛。在这个过程中，圣诞树无疑是最具代表性的装饰之一。为了庆祝这一传统，我们可以利用现代网页技术，创建一个动态的圣诞树效果，既美观又富有趣味。本文将介绍如何使用HTML、CSS和JavaScript构建一个互动的圣诞树，结合雪花飘落和闪烁的装饰球，营造出浓厚的节日氛围。通过这个项目，读者不仅能够学习到基本的网页开发技能，还能体验到创造节日氛围的乐趣。让我们一起动手，打造一个充满节日气息的网页吧！
HTML之图片和超链接的学习记录
qq_74474809的博客
11-12 439
将位图放大后，图片会失真；在实际开发中，最常见位图的图片格式有三种（可以从图片后缀名看出来）​：.jpg（或.jpeg）​、.png和.gif。.jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。title属性也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。所谓的图片路径，指的就是图片地址，这两个叫法是一样的意思。
html（超文本标记语言）
最新发布
weixin_65861348的博客
11-12 379
html 是用来描述网页的一种语言。html指的是超文本标记语言：HyperText Markup LAnguagehtml不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markup tag）html使用标记标签来描述网页html文档包含了html标签及文本内容html文档也叫做web页面HTML(超文本标记语言）网页有一个标准的结构，主要由以下几个关键部分组成：文档类型声明，HTML根元素，头部（head）和主体（body）部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。
Vue3打造的通用后台管理系统全解析
本项目的开发充分展示了Vue在构建通用后台管理系统中的强大功能和灵活性。 项目涵盖了Vue2和Vue3两个主要版本的使用，这表明了Vue社区的活跃以及其框架版本更新的连贯性。Vue3带来了Composition API，这是Vue3中一...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值