Ant Design Pro安装及简单搭建

2023-11-14

目录

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

二、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安装及配置:

(4条消息) yarn安装和基本使用_夏志121的博客-CSDN博客https://blog.csdn.net/m0_61961937/article/details/127322347?spm=1001.2014.3001.5501

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

(71条消息) Git下载安装及基本配置_夏志121的博客-CSDN博客https://blog.csdn.net/m0_61961937/article/details/126152246

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

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

开始使用 - Ant Design Prohttps://pro.ant.design/zh-CN/docs/getting-started上一篇博客已经安装好node.js、npm和yarn了

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

0855c5cc9eb04e2a82be48477c37db1e.png

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

c5b4949505364fbc93c524763054f68a.png

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

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

4325b4942ca848c297b5f01d5ba5891e.png

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

c73360d133dd4737a623ca8a377dede5.png

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

f04a53ec997943d4877bdc632fc663d1.png

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

# 查看当前策略

get-ExecutionPolicy

# 更改执行策略

set-ExecutionPolicy RemoteSigned

3250b6f74e884d7dab21d5763e4dc711.jpeg

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

 执行完之后就能运行

4d75a0f178a941cbb6e37015f8cd0cd2.png

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

cb9a68253d4640328ff7e2dbb5e624ac.png

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

yarn add @umijs/preset-ui -D

a57fd225205241879612b09828d159e0.jpeg

 小米饭插件效果:

4b5c95168b3342148586b052c83f733e.jpeg

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

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ant Design Pro安装及简单搭建 的相关文章

随机推荐

  • 计算机丢失msvcp90dll怎么办,msvcp90.dll

    msvcp90 dll官方版 msvcp90 dll官方版是电脑系统中不可缺少的dll文件 msvcp90 dll可以解决系统提示 找不到msvcp90 dll 或 msvcp90 dll 或者 msvcp90 dll 等情况 msvcp9
  • Win10家庭中文版开机后弹窗无法登录到你的账户点注销没用(解决过程记录)

    问题 之前一切正常 用完电脑后关机 没有提示有更新 也没更改系统设置 注册表什么的 时隔两天后开机就直接进入了临时账户 并弹窗 无法登录到你的账户 下面提示 通常可以通过从你的账户注销 然后重新登录来解决此问题 如果不立即注销 你创建的任何
  • Ubuntu系统配置花生壳内网穿透

    前言 本文档是基于被访问主机已经安装ssh服务 并且在内网已经确定ssh可用的情况下 做的穿透配置流程 一 被访问主机准备工作 被访问主机上下载花生壳并安装 我的是Ubuntu 1 Ubuntu安装包的下载命令如下 wget https d
  • 宏定义报重载错误

    我写了一个宏定义 define SWAP a b swap a a b b swap 然后在函数中进行引用 for i 1 i lt ma i SWAP covar k i covar j i 在编译过程中出现如下错误 error over
  • [Leetcode] 747. 至少是其他数字两倍的最大数

    题目描述 在一个给定的数组nums中 总是存在一个最大元素 查找数组中的最大元素是否至少是数组中每个其他数字的两倍 如果是 则返回最大元素的索引 否则返回 1 示例 1 输入 nums 3 6 1 0 输出 1 解释 6是最大的整数 对于数
  • FAST CGI的配置

    试着写一点fast cgi 查了一下 中文关于fast cgi的安装发现就一个文章 大家都是抄那个文章 那个文章写的还是不错 就是比较简单 只能指导大概的方法和方向 配置那个地方写的非常粗略 E文有一个文章写的非常详细 地址在这里 如果E文
  • wsl下ubuntu20.04配合clion编译openjdk8并运行

    起因 最近 看synchronized的锁的底层原理 其中有一个涉及底层C 部分的objectMonitor对象 在进一步了解的过程中 以及之前看深入理解java虚拟机中第一部分 自己编译jdk的触发 开始考虑本地编译jdk 在jdk上进行
  • cookie 相关

    https blog csdn net sinat 36594453 article details 88870899
  • Adaptive Execution如何让Spark SQL更高效更好用?

    文章目录 背景 动态设置 Shuffle Partition Spark Shuffle 原理 原有 Shuffle 的问题 自动设置 Shuffle Partition 原理 使用与优化方法 动态调整执行计划 固定执行计划的不足 Sort
  • 网赚项目分享:八条可以在线上做的副业兼职

    我自己就是从副业一路走过来的 从大学时游戏倒卖装备 时装和坐骑赚钱 到后来闲鱼无货源店铺 再到近期把自媒体写作变成主业 我亲身感受到拥有一份副业且不断坚持发展的重要性 小编是反对大家盲目创业 但是 不论你是上班族还是大学生 建议大家接受创业
  • Taylor theorem

    In calculus Taylor s theorem gives an approximation of a k times differentiable function around a given point by a polyn
  • 极客头条贡献者招募:欢迎懂分享的人

    极客头条 人人都是主编 http geek csdn net 发现 分享干货 我们组建了一个极客头条贡献者群 建立这个群 其实目的很明确 就是为了挖掘我们社区中热爱分享的成员 我们可以一块讨论技术 讨论极客头条 讨论社区 我们认为 每个技术
  • ActiveX控件中加载BCB编写的dll的注意事项

    最近写了一个ActiveX控件 使用MFC 控件中添加方法 其中调用BCB编写的一个dll进行读卡器的读卡并且返回卡号给前端页面 前台用JS调用activex控件的方法 测试中发现 BCB写好的dll 在Activex中加载时总是提示缺失相
  • require.js

    一 为什么要用require js 最早的时候 所有Javascript代码都写在一个文件里面 只要加载这一个文件就够了 后来 代码越来越多 一个文件不够了 必须分成多个文件 依次加载 下面的网页代码 相信很多人都见过 这段代码依次加载多个
  • 浅谈TCP滑动窗口机制

    1 浅谈TCP滑动窗口机制 概念 滑动窗口是两台主机间传送数据时的缓冲区 每台TCP IP 主机支持两个滑动窗口 一个用于接收数据 另一个用于发送数据 窗口尺寸表示计算机可能缓冲的数据量大小 2 工作原理 1 滑动窗口工作过程 TCP 协议
  • Quartus II 之1位全加器

    文章目录 一 半加器和1位全加器原理 1 半加器 2 1位全加器 二 实验目的 三 设计半加器 1 新建项目 2 创建原理图 3 半加器仿真 四 设计全加器 五 硬件下载测试 1 引脚绑定 2 下载测试 六 Verilog语言设计 七 总结
  • 分享一个轻量级免费UML绘图工具JUDE

    一 介绍 JUDE Java and UML Developers Environment 一个小巧实用的UML建模软件 绝对可以符合UML建模的要求 可以画CLASS USECASE STATECHART ACTIVITY OBJECT
  • jmeter 参数传递 无效

    问题 上个接口的返回值用于下个接口的入参 上个接口的返回值获取失败 解决 返回值获取需要从第一级开始 而不是想要的字段位置开始 且 后有一个点
  • 性能测试 —— Jmeter 命令行详细

    我们在启动Jmeter时 会看见 Don t use GUI mode for load testing only for Test creation and Test debugging For load testing use CLI
  • Ant Design Pro安装及简单搭建

    目录 一 node js npm及yarn安装及配置 二 Ant Design Pro安装及简单构建 Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端 设计解决方案 致力于在设计规范和基