几款开箱即用的炫酷中后台前端开源框架
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">#头条创作挑战赛#</a></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1、DevUI Admin</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1) 介绍：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">DevUI是面向企业中后台<span style="color: black;">制品</span>的开源前端<span style="color: black;">处理</span><span style="color: black;">方法</span>，其设计价值观基于"至简"、"沉浸"、"灵活"三种自然与人文相结合的理念，旨在为设计师、前端<span style="color: black;">研发</span>者<span style="color: black;">供给</span>标准的设计体系，并满足各类落地场景，是一款企业级开箱即用的<span style="color: black;">制品</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）项目<span style="color: black;">位置</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/devui/vue-devui?_from=gitee_search</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3) <span style="color: black;">运用</span>说明：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://devui.design/admin-page/docs/getting-started</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4) 项目截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/41f9a17718184790a5689e763e6ff4f1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=L2wGbZrHVx%2FzUQK23HXcuPCaDUw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8509cea5dbdd4fcbbafcbdf240cb9f1c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=%2BxHaGszcr7XYL6fkzN9PtgAK8J4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/4496373e508e4dcb9b38280c2cae48e3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=YAAAUh%2FDWDKJEVxlqe8azyPEB48%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2、Ant Design Pro</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1) 介绍：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Ant Design Pro 是阿里<span style="color: black;">研发</span>的一个企业级中后台前端/设计<span style="color: black;">处理</span><span style="color: black;">方法</span>，秉承</span>Ant Design<span style="color: black;"> 的设计价值观，致力于在设计规范和<span style="color: black;">基本</span>组件的<span style="color: black;">基本</span>上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步<span style="color: black;">提高</span>企业级中后台<span style="color: black;">制品</span>设计<span style="color: black;">开发</span>过程中的『用户』和『设计者』的体验。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）项目<span style="color: black;">位置</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/sendya/ant-design-pro-vue</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3) <span style="color: black;">运用</span>说明：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://pro.antdv.com/docs/getting-started</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4) 项目截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/edb994d573214c889d1ba1722c67db93~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=QbnBcMFUpHKJcP72NVjieGtcQ%2FQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/bd10f4f2e2914663a263ced31c864ec5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=Wrpt8scbLVN3pGjUJoyMkzrqGu4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1ed46b10ba724819b5f5a6aedb89f42b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=pWaA7F9XJ28J7gQcwutcVWG08zk%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7fe46e2551f3417d8b23338b21eebe6c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=HHyXR3J2lJZfcGARWx9ssMTj83A%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3、datav-vue</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1) 介绍：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">datav-vue是一款数据可视化应用搭建工具</span><span style="color: black;">，<span style="color: black;">供给</span>各类组件，<span style="color: black;">包含</span>图表组件、地图组件、信息组件、表格组件、<span style="color: black;">媒介</span>组件等，可快速设计并搭建自己想要的大屏数据展示效果。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）项目<span style="color: black;">位置</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/pengxiaotian/datav-vue?_from=gitee_search</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3) <span style="color: black;">运用</span>说明：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/pengxiaotian/datav-vue?_from=gitee_search</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4) 项目截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/ab8118af759543cd8d59f92a2f7a057b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=S1Z%2BoxqyaB4imHWAgQNKu6v8m%2FU%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f4b07bcce9db4b289439671898cb7c44~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=BcM%2BDlLxG9oIuPaOWx7lIcPU62I%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/04dfc371608244b58a710a0616ef9a8a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=Db6XB77ok4oVRCswzPwAE21AyJk%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">4、vue-vben-admin</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1) 介绍：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Vue Vben Admin 是一个免费开源的中后台模版。<span style="color: black;">运用</span>了最新的</span><span style="color: black;"><span style="color: black;">vue3</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">vite2</span></span><span style="color: black;">,</span><span style="color: black;"><span style="color: black;">TypeScript</span></span><span style="color: black;">等主流技术<span style="color: black;">研发</span>，开箱即用的中后台前端<span style="color: black;">处理</span><span style="color: black;">方法</span>，<span style="color: black;">亦</span>可用于学习参考</span><span style="color: black;">。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）项目<span style="color: black;">位置</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://toscode.gitee.com/ethereals/vue-vben-admin</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3) <span style="color: black;">运用</span>说明：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://vvbin.cn/doc-next/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4) 项目截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/4b3a85df463444349b7f975cbf512277~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=pFc1GQD6h9rPgsXlRaTX%2Bs%2FzNvE%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1a60da2e64f44abebb4af8d8c50f129f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=%2F2i1857BMddzLCW2MF2W%2BeWTxEQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/0e35be4766354c7e80ef473d1d894d41~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=1MWjN4XCdeDZUcrNSRTY3Z9QUVg%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">5、vue-element-admin</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1) 介绍：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vue-element-admin<span style="color: black;">是一个后台前端<span style="color: black;">处理</span><span style="color: black;">方法</span>，它基于</span>vue<span style="color: black;"> 和 </span>element-ui<span style="color: black;">实现。它<span style="color: black;">运用</span>了最新的前端技术栈，内置了 i18n 国际化<span style="color: black;">处理</span><span style="color: black;">方法</span>，动态路由，权限验证，提炼了典型的业务模型，<span style="color: black;">供给</span>了丰富的功能组件，它<span style="color: black;">能够</span><span style="color: black;">帮忙</span>你快速搭建企业级中后台<span style="color: black;">制品</span>原型。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）项目<span style="color: black;">位置</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/mirrors/vue-element-admin?_from=gitee_search</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3) <span style="color: black;">运用</span>说明：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://panjiachen.github.io/vue-element-admin-site/zh/</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4) 项目截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a52a80bdd62848259e8cc87888890efc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=VQmxDchoc7TxIGLObU1AtIGAkxI%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/15585a84afdf4668aa72181b64bfbbbe~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=4QL8sxQS12sHwzmtR7RKryizS5s%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/28bb3eaebf83417fbdf1803974e7b680~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=UmxkvgDEPANjRP2W0bd7MgOVfU8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/e4be38a876814bf0bc43269f8de9f1a5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=Eobk1P9LISPQH4iwBKFM6dixK7A%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">6、vue-next-admin</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1) 介绍：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，<span style="color: black;">期盼</span>减少工作量，<span style="color: black;">帮忙</span><span style="color: black;">大众</span>实现快速<span style="color: black;">研发</span>。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）项目<span style="color: black;">位置</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/lyt-top/vue-next-admin?_from=gitee_search</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3) <span style="color: black;">运用</span>说明：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">https://gitee.com/lyt-top/vue-next-admin?_from=gitee_search</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4) 项目截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a5da49f0dbe34c0391361b6570fd9851~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=ITGm3yy5PRmj9suEnNZ6NPUjDh0%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/5bd23a46c6a9495c8186d4016e079106~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=zxewZcOWbjYqPVjomMLFuYyJPUc%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/0d8d2f17d2ed421182a24f1563a71562~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=6SYRdsi5Xvu6kKHSbc7LIReajd4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2f1e8da5f1a5441793c11f9e60cadae1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728743757&x-signature=7F4lOnPZhlFaGt6XumzueF1iNAY%3D" style="width: 50%; margin-bottom: 20px;"></div>
我赞同你的看法，你的智慧让人佩服，谢谢分享。 谢谢、感谢、感恩、辛苦了、有你真好等。 在遇到你之前，我对人世间是否有真正的圣人是怀疑的。 我完全赞同你的观点，思考很有深度。
页:
[1]