Ant Design Pro安装及简单搭建

简介: Ant Design Pro安装及简单搭建

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。


一、node.js、npm、yarn及Git安装及配置


在搭建Ant Design Pro的时候需要用到node.js、npm、yarn及Git,下面是配置的相关博客


在上一篇博客有node.js、npm及yarn安装及配置:



以前的博客有Git安装的教程:



二、Ant Design Pro安装及简单构建


在构建前多看一看官方文档,以防出错:



上一篇博客已经安装好node.js、npm和yarn了


下一步在你需要生成项目的空文件进入DOS命令窗口



使用官方提供的pro-cli来快速初始化脚手架



# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp


总共两段代码(第二个命令之后选择umi@3,搭建一个简单的脚手架即可):



此时项目就生成在空文件夹里:



把项目在webstorm中打开(webstorm需要本地自行安装),需要运行npm



在终端运行yarn,下载依赖,如果用yarn是遇到问题:yarn无法加载文件,因为在此系统上禁止运行脚本是时Windows PowerShell阻止了脚本运行,更改运行策略即可(用管理员运行Windows PowerShell)。


# 查看当前策略


get-ExecutionPolicy


# 更改执行策略


set-ExecutionPolicy RemoteSigned



yarn下载依赖,需要一些时间



执行完之后就能运行




输入账户及密码后登录效果:



然后是小米饭插件的运行,在终端运行:


yarn add @umijs/preset-ui -D



小米饭插件效果:



Ant Design Pro简单搭建就完成了。

目录
相关文章
|
前端开发 JavaScript Java
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
1481 0
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1867 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
移动开发 缓存 自然语言处理
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
|
11月前
|
监控 Ubuntu Linux
在Ubuntu环境中制定脚本开机自动启动设置
以上就是在Ubuntu环境下制定脚本开机自动启动的设置方法。通过Systemd服务,你可以按需要轻松管理脚本的自动执行。全新的一天开始时,脚本已静静地运行,无需额外手动启动,机器恰如一位忠诚的仲夏夜的梦想者,在黎明的许诺中尽职尽责。于是心满意足地看着,任由它在自己选择的轨道上静静地飞翔。
1289 26
|
11月前
|
存储 关系型数据库 数据库
斩获18.3K star!再见Airtable,这款Postgres驱动的开源表格神器要火!太 6了
Teable是一款基于PostgreSQL的开源无代码数据库平台,被誉为“最具潜力的Airtable开源替代方案”。它支持百万级数据秒级响应、实时协同编辑、多维度数据视图(表格、看板、日历等)及智能数据处理。采用Next.js+React前端、NestJS+PostgreSQL后端技术栈,提供插件开发SDK,支持云原生部署。适用于敏捷开发、跨部门数据中台、知识库管理等多种场景,性能卓越且开发者友好。项目地址:https://github.com/teableio/teable。
1245 3
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
2269 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
Java Maven
Maven编译报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0:compile 解决方案
在执行Maven项目中的`install`命令时,遇到编译插件版本不匹配的错误。具体报错为:`maven-compiler-plugin:3.13.0`要求Maven版本至少为3.6.3。解决方案是将Maven版本升级到3.6.3或降低插件版本。本文详细介绍了如何下载、解压并配置Maven 3.6.3,包括环境变量设置和IDEA中的Maven配置,确保项目顺利编译。
16512 5
Maven编译报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0:compile 解决方案
|
网络协议 Windows
【IntelliJ IDEA】idea plugins搜索不出来,如何找到插件的解决方案
【IntelliJ IDEA】idea plugins搜索不出来,如何找到插件的解决方案
15427 1
|
Oracle 关系型数据库 Windows
如何彻底卸载 IDEA,将IDEA完全删除
本文提供了一个详细的教程,指导用户如何彻底卸载 IntelliJ IDEA,包括使用Uninstall.exe程序和通过注册表删除残留项的步骤。
11030 3
如何彻底卸载 IDEA,将IDEA完全删除
|
数据可视化 安全 IDE
快速部署Langflow构建低代码应用
本文介绍了Langflow的基本信息,并通过阿里云计算巢完成了Langflow的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Langflow,非技术同学也能轻松搞定。

热门文章

最新文章