关于后台管理平台框架选择项目(vue)

本文作者分享了三款后台管理平台框架的体验,包括Fantastic-admin的专业版吸顶效果,COOL-ADMIN的组件封装,以及开源免费的RuoYi-Vue。作者指出, Fantastic-admin的导航布局和UI设计受到好评,COOL-ADMIN在基础版和专业版功能分配上有待改进,而RuoYi-Vue因开源和提供Vue3版本受到青睐。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        近几年后台管理平台的项目也是慢慢从后台转向了前台页面展示,最近小编也是在工作之余整理出几套后台管理平台的框架,放到本地试运行了一下,希望各位码友们能用上,仅表达个人观点。

一、Fantastic-admin

Code: https://github.com/hooray/fantastic-admin

Demo: Fantastic-admin 基础版

Remark:

        这一款的基础班没有什么可说的,在专业版里面可以把一级路由做成吸顶效果,对我个人来说是非常喜欢这个效果的,因为在一些后台审核的页面,主要区域必须要占显示屏大部分页面,所以说导航部分越小越好,布局安排合理,ui也是选择的element,对vue用户也是非常的友好


二、cool-admin

Code: https://github.com/cool-team-official/cool-admin-vue

Demo: COOL-ADMIN

Remark:

        相对于Fantastic-admin,也区分专业版和基础班、小编也是为大家尝试了一下专业版,发现还没有基础版的功能多,这款框架的优点是很多组件都进行过二次封装,比如表格,左侧导航,动态标签页,只是不知道后期还会不会存在一些bug问题,不过既然已经发不出来的,相信很多的小bug已经解决过了,在基础版里面文件结构体系不太清楚,专业版里面虽然清楚了,但是功能少了,总的来说希望官网修复一下吧,本来一开始定好这套框架了,又因为专业版的原因换掉了,花的钱也打水漂了。


三、若依

Code: RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 Demo: 若依管理系统

Remark:

                若依这一套框架我个人是非常喜欢的,不但开源免费,而且还提供v3版本。如果只注重前端的话可以选择这一套框架,因为是前后分离的,若依的后台代码写的比较一般,前端页面布局封装,还有提供的密钥保密做的根本话说,良心商家,将来会不会收费还不知道,作为中国资深的程序员,本着能白嫖绝不花钱的本能,抓紧时间下手吧。

uni-app使用echarts的详细教程如下: 1. 安装echarts插件 在uni-app项目的根目录下,打开终端,执行以下命令安装echarts插件: ```shell npm install echarts --save ``` 2. 在页面中引入echarts 在需要使用echarts的页面中,引入echarts的js文件。可以在`<script>`标签中使用`import`语句引入echarts: ```javascript import * as echarts from 'echarts' ``` 3. 创建echarts实例 在页面的`<template>`标签中,添加个容器元素用于显示echarts图表: ```html <view class="chart-container" id="chart"></view> ``` 4. 初始化echarts实例 在页面的`<script>`标签中,使用`uni.createSelectorQuery()`方法获取到容器元素的节点,然后使用`echarts.init()`方法初始化echarts实例: ```javascript onReady() { uni.createSelectorQuery().select('#chart').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = uni.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr const chart = echarts.init(canvas, null, { width: res[0].width, height: res[0].height, devicePixelRatio: dpr }) this.chart = chart }) } ``` 5. 配置echarts图表 在页面的`<script>`标签中,使用`this.chart.setOption()`方法配置echarts图表的选项,例如: ```javascript this.chart.setOption({ title: { text: '柱状图示例' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] }) ``` 6. 渲染echarts图表 在页面的`<script>`标签中,使用`this.chart.render()`方法将echarts图表渲染到页面上: ```javascript this.chart.render() ``` 以上是uni-app使用echarts的详细教程。你可以根据需要进行配置和定制,实现各种类型的图表展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

剑非出我心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值