请教前端同胞，如何快速搭建一个后台管理的前端项目

Vue

项目

上手

后台

87 条回复 • 2023-03-09 18:27:53 +08:00

1

xiaoxiaoming01

2023-03-08 10:02:26 +08:00

40

如果你愿意放弃 vue 教，而加入我们 react 教我就告诉你😇😇

2

yhxx

2023-03-08 10:04:58 +08:00

建议看这个
https://element-plus.org/zh-CN/guide/quickstart.html#%E5%BF%AB%E6%8D%B7%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E6%A8%A1%E6%9D%BF

一路下一步可以体验一下从头开始堆起来的感觉

vue-admin-template 这种模板我觉得不太合适，里面有太多作者的个人风格，而且太大了，对新人不太友好

3

wildnode

2023-03-08 10:05:03 +08:00

模板项目应该是最快的了吧，毕竟 router 和 layout 等等一些基础的已经帮你弄好了。

4

donggua997

OP

2023-03-08 10:08:18 +08:00

@xiaoxiaoming01 #1 不到啊 vue 不是简单易上手么，react 有人带也行哈哈

5

Morriaty

2023-03-08 10:09:35 +08:00

1

写 python 的话，就 Django 一把梭🤣

6

donggua997

OP

2023-03-08 10:14:43 +08:00

@yhxx #2 这个链接什么框架呀

7

jamosLi

2023-03-08 10:15:06 +08:00

vue-admin 改改不就行了

antd pro 改改不就行了

别啥都自己从零开始，做不好的。

8

BiChengfei

2023-03-08 10:21:49 +08:00

前端工程化，本来就是把前端复杂化，提高门槛。最快速的管理后台，还是前后端一体的 jQuery 生态框架更便捷

9

pengtdyd

2023-03-08 10:26:21 +08:00

3

如果你愿意放弃 vue ，而加入我们 react 我就告诉你

希望 OP 能早日弃暗投明，不要做无谓的抵抗！！！

10

Zchary

2023-03-08 10:27:18 +08:00 via iPhone

这个流程前端写个 index.html 不就行了吗🧐

11

um1ng

2023-03-08 10:27:25 +08:00

2

试试这个？ https://pro.arco.design/，脚手架快速搭建

12

wu67

2023-03-08 10:45:37 +08:00

1

差不多得了, vue 都没法快速上手, react 门槛更高...

13

dfkjgklfdjg

2023-03-08 10:46:11 +08:00

所以你的主力语言是啥？ Java 的话，可以选择这两个平台 [JeecgBoot]( https://github.com/jeecgboot/ant-design-vue-jeecg)、[RuoYi]( https://github.com/yangzongzhuan/RuoYi-Vue)，直接整合了前端的 Admin 版本，然后后端可以直接生成前端模板了。其他的语言应该也有类似差不多的平台可以选择。

14

donggua997

OP

2023-03-08 10:52:33 +08:00

@pengtdyd #9 小弟能力不配 react 惭愧

15

knightdf

2023-03-08 11:02:17 +08:00

做为一名后端，为啥我感觉 react 比 vue 更好上手？

16

litchinn

2023-03-08 11:08:03 +08:00

最简单的办法，你找一个前端项目，然后去适配它，比如 ruoyi 这种，其次是用 vue-admin-template 这类模板

其实后端我觉得用 freemarker+tailwindcss 也不错

17

ymy3232

2023-03-08 11:12:43 +08:00

用 ruoyi 改写多了就熟悉了

18

hzxxx

2023-03-08 11:42:09 +08:00

推荐 gva-admin ，功能挺好的，也有完整的部署流程（ nginx 、docker ）

19

hzxxx

2023-03-08 11:43:05 +08:00

@hzxxx 噢，没看到你是初学者，初学者不建议上来就搞比较复杂的，可以先 github 搜索关键字找个简单点的练练手

20

sofukwird

2023-03-08 11:45:11 +08:00 via Android

如果你愿意放弃 vue 教，而加入我们 svelte 教我就告诉你😇😇
点击一键加入 https://kit.svelte.dev/

21

Jtyczc

2023-03-08 11:46:00 +08:00 via Android

@xiaoxiaoming01 你告诉我吧，大哥

22

JerryY

2023-03-08 11:48:50 +08:00

如果你愿意放弃 vue 教，而加入我们 vanillajs 教我就告诉你

23

basefas

2023-03-08 11:50:48 +08:00

可以看看我的项目，前后端都有
https://github.com/basefas/react-antd-admin
https://github.com/basefas/admin-go

24

Dragonphy

2023-03-08 11:52:35 +08:00

如果你愿意放弃 Vue 教，而加入我们 SolidJS 教，我就告诉你

25

leeggco

2023-03-08 11:56:50 +08:00

4

如果你愿意放弃 Vue 教，而加入我们 Angular 教，我就告诉你

26

dengshen

2023-03-08 12:00:35 +08:00

@xiaoxiaoming01 react 不行了吧？/狗头需要用这种方式拉新哈哈哈😄

27

dengshen

2023-03-08 12:01:47 +08:00

@dengshen 看了上面的安利顿时感觉 vue 更香了🐶

28

westoy

2023-03-08 12:01:58 +08:00

如果你愿意放弃 Vue 教，而加入我们 Backbone 教，我就告诉你

29

jasonlwy

2023-03-08 12:06:38 +08:00

@xiaoxiaoming01 哈哈哈哈哈哈

30

zeonll

2023-03-08 12:07:00 +08:00

我也是后端，前段时间在学前端，搞死我了。和写后端逻辑完全不一样。

我学的 React ，跟着 B 站上的视频敲了一个后台管理系统，，只能说摸到套路了。但是一堆奇奇乖乖的 API 和什么组组件勾子还没太懂

31

coldmonkeybit

2023-03-08 12:14:25 +08:00

如果你愿意以后只忠于 vue 教，其他框架看都不看一眼，我就告诉你

32

liuxu

2023-03-08 12:18:20 +08:00

可笑，Vue 教怎么一个能打的都没有，用 layui 就行了，剩下的疯狂堆 div

33

HiCode

2023-03-08 12:39:56 +08:00

后端的话，用这一个比较适合 https://gitee.com/tengzhinei/ly-admin-ui

不需要用 node.js ，直接上手就用。

过段时间我也想搞一个类似的项目。

34

jaywhen

2023-03-08 12:42:49 +08:00 via iPhone

传统三大前端框架都挺好的，都能解决问题，这三个在工作中都写过，恕我直言，玩烂梗大可不必

35

antowa

2023-03-08 12:46:24 +08:00

你到市场，买一只活鸡，然后拿电脑，往键盘上撒一把米，鸡很快就能 coding 出来了

36

fo0o7hU2tr6v6TCe

2023-03-08 13:00:01 +08:00

@xiaoxiaoming01 哦～尊贵的 react 门，我是你最忠实的信徒，快告诉我😇😇

37

living9696

2023-03-08 13:20:02 +08:00

后端 go 的话 gin-vue-admin 可以的该有的基本都有了

38

tkHello

2023-03-08 13:20:08 +08:00

空手传经后人当饿死了

39

darkengine

2023-03-08 13:21:44 +08:00

如果你愿意放弃 Vue 教，而加入我们 VanillaJS 教，我就告诉你

40

azui999

2023-03-08 13:22:51 +08:00

要说后端,其实 angular 更友好,哈哈

41

justin2018

2023-03-08 13:23:10 +08:00

Strapi - Open source Node.js Headless CMS 🚀
https://strapi.io/

Appwrite - Open-Source End-to-End Backend Server
https://appwrite.io/

42

webfamer

2023-03-08 13:23:53 +08:00

我用的 react ，直接 umi 配置一下就好了

43

smilingsun

2023-03-08 13:27:20 +08:00

前一段时间看到这个项目（虽然是 React 的，但是感觉 Vue 应该也可以这么做），感觉不错，在灵活和约定俗成之间尝试找平衡

https://github.com/refinedev/refine

https://user-images.githubusercontent.com/18739364/200257209-8fc0c8b1-2568-453e-873f-00513434deed.png

44

xqk111

2023-03-08 13:34:04 +08:00

React ，直接看 antd pro ，生成写好的，省事

45

xqk111

2023-03-08 13:34:25 +08:00

https://pro.ant.design/zh-CN

46

IamCyborg

2023-03-08 13:42:10 +08:00

@xiaoxiaoming01 好了我脱离 vue 教，遁入 react 教了，大哥教教我 8

47

isbase

2023-03-08 13:46:57 +08:00

了解一下 umi max

48

42vov

2023-03-08 13:47:33 +08:00

@Dragonphy 好，我加入👻

49

heng1025

2023-03-08 14:18:58 +08:00

好巧，我不是 vue 教，为了侵入内部，我也造了一个 starter, 看这里 https://github.com/heng1025/vue-admin-vite

50

ZoeeoZ

2023-03-08 14:30:34 +08:00

如果会 vue,vue-element-admin 应该就是最快的了,vue 的模板语法最简单,简单的增删改查逻辑也不需要像 react 需要额外付出精力

51

Ufo666

2023-03-08 14:30:56 +08:00

我直接用的 antd-vue-admin

52

hotcool100

2023-03-08 14:32:02 +08:00

https://github.com/budwk/budwk/tree/v8.x/wk-vue3-admin

53

lete

2023-03-08 14:43:41 +08:00

svelte 和 solid 才是未来的方向，vue 也在筹备无 runtime 目前貌似是处于私有仓库的状态

54

lueluev

2023-03-08 15:15:29 +08:00

1

后端上手 angular 最快啊真的

55

lizy0329

2023-03-08 15:27:10 +08:00

1. 不建议使用那些 XXX-ADMIN 的管理模板，学习成本十分高
2. 使用 astro 作为引擎，vue + tailwind/windi/unocss + zag/headlessUI 作为核心
3. 去一些 tailwind 模板里拷贝模块，你需要用什么就拷什么
4. 提交你的代码

56

jry

2023-03-08 15:32:18 +08:00

可以试试我的框架，专门为后端而生的 vue 自动渲染后台，https://uiadmin.net ，无需学习任何前端知识。

57

chrosing

2023-03-08 15:37:19 +08:00

@xiaoxiaoming01 #1 我后端,我愿意加入 react 教,请(恩赐)学习方法 :doge

58

SilentDepth

2023-03-08 16:25:23 +08:00

@lizy0329 #55 Astro 搞后台项目？选错技术方向了吧

59

fackVL

2023-03-08 16:32:17 +08:00 via iPhone

ruoyi 分离版欢迎你

60

SilentDepth

2023-03-08 16:39:57 +08:00

楼主这个要求有点难。快速搭建一个管理后台那肯定是用工程模板最快，element-admin 、AntD Pro 啥的都行。但如果想同时学习前端技术（比如 Vue ），这反而不是推荐的方法，因为管理后台这种项目往往隐含着一大堆各个方面的工程实践经验，零基础进去容易出不来。打包部署这些倒不是问题。

如果楼主就是想快速出东西，对工作原理、机制哲学无所谓或者不急着弄明白，那先对一些核心概念产生感性的认识，知道怎么用就行了。比如以 Vue 为例，最核心的就是组件化和状态管理，具体实践上能用现成的库就不造轮子，先整出一个看得到的东西出来，然后在这个基础上一步步加其他业务，比如用户验证、角色管理等。这个过程中，但凡能在后端实现的先丢给后端，减少前端部分的复杂度。毕竟是学习，没必要上来就挑战高难度。把前端的玩法搞明白后再移回来就是了。当然，这一切的前提是 JS 基础要有，不然先抛开一切学一下 Vanilla JS 比较好。

如果想要更高效地学习，建议找个老师带，可以事半功倍。

61

yuhuanxi

2023-03-08 16:47:05 +08:00

@xiaoxiaoming01 我愿意

62

vone

2023-03-08 16:47:40 +08:00

如果你愿意放弃 Vue 教，而加入我们 jQuery 教，我就告诉你

63

lzblalala

2023-03-08 16:50:02 +08:00

@jaywhen 说得很好，评论区都是什么妖魔鬼怪

64

nzbin

2023-03-08 16:51:50 +08:00

1

后端还犹豫啥，直接 Angular 一把梭，三步搞定
https://github.com/ng-matero/ng-matero

$ ng new <project-name>
$ cd <project-name>
$ ng add ng-matero

65

javen73

2023-03-08 17:00:32 +08:00

只是增删改查的话。Django 爽的一批

66

ColdBird

2023-03-08 19:39:48 +08:00

如果你愿意放弃 Vue 教，而加入我们 js 教，我就告诉你

67

wellerman

2023-03-08 19:48:30 +08:00

antd

68

cheng6563

2023-03-08 20:06:03 +08:00

学学 vue 基础，然后下个 ruoyi 分离版，看看他代码生成器生成出来的代码咋样的，照着抄抄改改就能做业务了。

打包部署要稍微学学 Linux shell ，学会常用的文件操作控制进程操作，以及 ssh 命令也就行了。

其他的靠面向 stackoverflow 开发就行了

69

webcape233

2023-03-08 20:06:38 +08:00 via iPhone

你可以加入我们 svelte 教，用 sveltekit ，

70

dddd1919

2023-03-08 20:10:20 +08:00

1

不如直接 jquery+bootstrap ，简单方便

71

ThinkPad93

2023-03-08 20:51:22 +08:00

后端是 php 吗，如果是推荐用
https://www.fastadmin.net/
以前看同事用过，或者是 layuiAdmin
https://dev.layuion.com/themes/layuiAdmin/

72

jikeytang

2023-03-08 21:06:16 +08:00

可以从这两个网站看看：
http://vue-admin.cn
vue 管理模板合集
http://react-admin.cn
react 管理模板合集

73

zhennann

2023-03-08 21:13:38 +08:00

如果追求更高效率，就选一个功能相对完整又扩展性强的框架，比如 CabloyJS 开源全栈框架： https://github.com/zhennann/cabloy

74

cz5424

2023-03-08 21:21:48 +08:00

我是后端，已经可以熟练的写 vue 了，前后端打包、部署、devops 到 k8s ，整个流程都会了；会前端是从 vue-admin-template 开始的

75

catch

2023-03-08 22:09:33 +08:00 via Android

要不安卓也你做了

76

poporange

2023-03-08 22:20:18 +08:00

python django

77

fate

2023-03-08 22:38:39 +08:00

naive-admin 这个开源的后台模板，我直接套上就用了，慢慢的前端就懂了。

78

kingfalse

2023-03-08 22:45:41 +08:00 via Android

大兄弟看看 vaadin 吧！这玩意真舒服

79

starAllNull

2023-03-09 01:40:51 +08:00 via iPhone

同样的问题困扰，关注一下

80

starAllNull

2023-03-09 01:41:12 +08:00 via iPhone

@xiaoxiaoming01
大佬求带路

81

klo424

2023-03-09 08:13:46 +08:00

同后端，第一次用前端框架用的 angularjs ，上手非常顺利，后面用 vue 的很别手，最后用 react 十分顺手，以后的项目几乎都用 react 了，个人觉得 react 的写法更适合后端开发。

82

tairan2006

2023-03-09 09:55:26 +08:00

后端的话 angular 上手应该最快（尤其是 java 后端）

不过直接学的话，vue+ElementUI 其实也很快。。

83

DetectiveBoy

2023-03-09 09:55:27 +08:00

同样是后端，用 RuoYi 帮亲戚做个了库存管理系统（花时间学了点 Android ，还做了个 PDA 端）。
优点：
1. RuoYi 包含了前后端项目。如果你找个单独的前端项目（比如 vue-admin-template ），还需要花时间去对接后端。
2. 文档很详细。比如文档里会告诉你服务器如何配置，前后端如何打包发布到服务器上。这些东西网上都能查到，但集合在一篇文档里能帮你节约很多时间。
3. 自动生成代码功能很好用。只要设计好表结构，能自动生成基础的前后端代码。像我的场景，前端没啥太复杂的功能，自动生成的前端代码稍微改改就能用了。
缺点：
文档部分收费

84

fo0o7hU2tr6v6TCe

2023-03-09 13:10:57 +08:00

@tkHello 我是真想学点... 有没有什么路子，请大佬喝杯咖啡能传授一下方法么 VXppRXRlcm5hbEdvZF8=

85

donggua997

OP

2023-03-09 16:23:45 +08:00

@hzjseasea #84 一杯咖啡后人当饿死了

86

fo0o7hU2tr6v6TCe

2023-03-09 18:10:25 +08:00

@donggua997 老哥联系我了，沟通的很愉快

87

winglight2016

2023-03-09 18:27:53 +08:00

agnular 1.x 其实是最适合后端程序员的，我当初钻研很深入，没想到 2.x 直接 180 度大转弯，我再也不用 angular 了

同样是想做个后台管理，我发现 react-admin 非常适合后台开发，前端代码量非常少，适配了很多后台 API ，我用 parse 做后端很省事儿