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

[donggua997]

如题，我是后端，最近想做个简单后台项目，顺便熟悉一下：
前后端打包、部署、devops 到 k8s ，整个流程。

目前困难是：前端的 vue 项目很难开始。
也在 b 站看了 vue 教程，但是毕竟练习少 看完了依然不好上手；
最近看了 github 上有模版项目如 vue-admin-template ，通过这种方式上手合适么，有没有效率更高的学习方式

[xiaoxiaoming01]

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

[yhxx]

建议看这个
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 这种模板我觉得不太合适，里面有太多作者的个人风格，而且太大了，对新人不太友好

[wildnode]

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

[donggua997]

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

[Morriaty]

写 python 的话，就 Django 一把梭🤣

[donggua997]

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

[jamosLi]

vue-admin 改改不就行了

antd pro 改改不就行了

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

[BiChengfei]

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

[pengtdyd]

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

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

[Zchary]

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

[um1ng]

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

[wu67]

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

[dfkjgklfdjg]

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

[donggua997]

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

[knightdf]

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

[litchinn]

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

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

[ymy3232]

用 ruoyi 改 写多了就熟悉了

[hzxxx]

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

[hzxxx]

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

[sofukwird]

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

[Jtyczc]

@xiaoxiaoming01 你告诉我吧，大哥

[JerryY]

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

[basefas]

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

[Dragonphy]

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

[leeggco]

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

[dengshen]

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

[dengshen]

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

[westoy]

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

[jasonlwy]

@xiaoxiaoming01 哈哈哈哈哈哈

[zeonll]

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

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

[coldmonkeybit]

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

[liuxu]

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

[HiCode]

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

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

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

[jaywhen]

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

[antowa]

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

[hzjseasea]

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

[living9696]

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

[tkHello]

空手传经 后人当饿死了

[darkengine]

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

[azui999]

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

[justin2018]

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

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

[webfamer]

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

[smilingsun]

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

https://github.com/refinedev/refine

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

[xqk111]

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

[xqk111]

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

[IamCyborg]

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

[isbase]

了解一下 umi max

[42vov]

@Dragonphy 好，我加入👻

[heng1025]

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

[ZoeeoZ]

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

[Ufo666]

我直接用的 antd-vue-admin

[hotcool100]

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

[lete]

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

[lueluev]

后端上手 angular 最快啊 真的

[lizy0329]

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

[jry]

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

[chrosing]

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

[SilentDepth]

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

[fackVL]

ruoyi 分离版欢迎你

[SilentDepth]

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

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

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

[yuhuanxi]

@xiaoxiaoming01 我愿意

[vone]

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

[lzblalala]

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

[nzbin]

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

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

[javen73]

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

[ColdBird]

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

[wellerman]

antd

[cheng6563]

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

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

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

[webcape233]

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

[dddd1919]

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

[ThinkPad93]

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

[jikeytang]

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

[zhennann]

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

[cz5424]

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

[catch]

要不安卓也你做了

[poporange]

python django

[fate]

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

[kingfalse]

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

[starAllNull]

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

[starAllNull]

@xiaoxiaoming01
大佬 求带路

[klo424]

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

[tairan2006]

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

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

[DetectiveBoy]

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

[hzjseasea]

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

[donggua997]

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

[hzjseasea]

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

[winglight2016]

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

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