又快又美又好用的前端框架 Ant Design Pro
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">《开源精选》是<span style="color: black;">咱们</span>分享Github、Gitee等开源社区中<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>——Ant Design Pro。</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a953ccf05b894332a3fa51694bb67d82~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=myYJwyL36%2BUk5H%2F5v19q47QBcKE%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计<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 style="color: black;">开发</span>过程中的『用户』和『设计者』的体验。</span></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">特性</h1><span style="color: black;"><strong style="color: blue;">TypeScript</strong>: 应用程序级 JavaScript 的语言</span><span style="color: black;"><strong style="color: blue;">区块</strong>: <span style="color: black;">经过</span>区块模板快速构建页面</span><span style="color: black;"><strong style="color: blue;">优雅美观</strong>：基于 Ant Design 体系精心设计</span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">平常</span>设计模式</strong>：提炼自中后台应用的典型页面和场景</span><span style="color: black;"><strong style="color: blue;">最新技术栈</strong>：<span style="color: black;">运用</span> React/umi/dva/antd 等前端前沿技术<span style="color: black;">研发</span></span><span style="color: black;"><strong style="color: blue;">响应式</strong>：针对<span style="color: black;">区别</span>屏幕<span style="color: black;">体积</span>的设计</span><span style="color: black;"><strong style="color: blue;">主题</strong>：可配置的主题满足多样化的品牌诉求</span><span style="color: black;"><strong style="color: blue;">国际化</strong>：内建业界通用的国际化<span style="color: black;">方法</span></span><span style="color: black;"><strong style="color: blue;">最佳实践</strong>：良好的工程实践助您<span style="color: black;">连续</span>产出高质量代码</span><span style="color: black;"><strong style="color: blue;">Mock 数据</strong>：实用的本地数据调试<span style="color: black;">方法</span></span><span style="color: black;"><strong style="color: blue;">UI 测试</strong>：自动化测试<span style="color: black;">保证</span>前端<span style="color: black;">制品</span>质量</span>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">支持环境</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7f1d949d5a014e33b275ced932c61e69~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=GrMNpmhZClaTLr2TmeQwxsQ%2B1gU%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">项目体验</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/236f0a8260d44ebbb0cacfd070454c65~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=4b0DWsLO8acgLzNRPvhfjad66BQ%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">分析页</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/d30458fe00584a8bb0aadaed8b583e80~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=C27d7sOgwwpueVppek%2FLCI88j5A%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">监控页</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/5178430e7e574249ac0d7a7b2b723da2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=juLmgqyXwmzpT6%2FEwWVdV%2BQBvGE%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表单</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/45e67e1c401f48f3a75e978f5fcc6e4d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=kEnf46I8IGgXXcmNGpOMpH2j1UE%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">搜索列表</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c96fc72e3f714c1c9c836680a6918e7b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=EnBx6fr5sWbd5bGLmKeOGY6eOFs%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">查找</span>表格</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c0f81216710a491293c026d627ec4ee9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=NS4pulnSOH%2B2PFgoCiJ1bzZUh%2Bk%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">流程编辑器</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/fab954b16a3a4868a8e419887b7cbb3f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=BEjJxx8sj1s6S8XjWq1e0rThP5w%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">脑图编辑器</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/59575eafa4b84db29a8445cd1295a10f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744080&x-signature=YXT%2F8wP%2BxqLmK5CfVXwGZGMSlbI%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">个人页</p>
</div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">运用</span></h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">初始化脚手架：</strong></span></p><span style="color: black;"># <span style="color: black;">运用</span> npm</span>
<span style="color: black;">npm</span> i @ant-design/pro-cli -g
pro create myapp <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">选取</span> umi 的版本：</strong></span></p>? <span style="color: black;">运用</span> umi@4 还是 umi@3 ? (Use arrow<span style="color: black;">keys</span>)
❯ umi@4
umi@3 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">倘若</span><span style="color: black;">选取</span>了 umi@4 版本，暂时还不支持全量区块。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">倘若</span><span style="color: black;">选取</span>了 umi@3，还<span style="color: black;">能够</span><span style="color: black;">选取</span> pro 的模板，pro 是<span style="color: black;">基本</span>模板，只<span style="color: black;">供给</span>了框架运行的基本内容，complete <span style="color: black;">包括</span>所有区块，不太适合当<span style="color: black;">基本</span>模板来进行二次<span style="color: black;">研发</span></span></p>? 要全量的还是一个简单的脚手架? (<span style="color: black;">Use</span> arrow <span style="color: black;">keys</span>)
❯ simple
<span style="color: black;">complete</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">安装依赖：</strong></span></p><span style="color: black;">$</span><span style="color: black;"> <span style="color: black;">cd</span> myapp && tyarn</span>
// 或
<span style="color: black;">$</span><span style="color: black;"> <span style="color: black;">cd</span> myapp && npm install </span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">起步</span>服务：</strong></span></p><span style="color: black;">npm</span> run start<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">-END-</strong></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">开源协议：MIT</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">开源<span style="color: black;">位置</span>：</p>https://github.com/ant-design/ant-design-pro
外链发布论坛学习网络优化SEO。 外链发布社区 http://www.fok120.com/
页:
[1]