程序员经验分享-hwhale

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(使用前将#替换为@)

Web前端开发与Vuejs实践

npm

javascript

前端

nodejs

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

  • 如何使用nodeJS SFTP客户端列出所有子目录？

    有趣的节点 JS ssh2 sftp client 我想列出给定路径中的所有目录及其子目录 let sftp new ssh2SftpClient console log sftp sftp connect host xx xxx xxx

  • angularjs 自定义过滤器检查数据数组内的值

    我有两个过滤器 它们根据数据中的队列键过滤数据 这是我的代码 var app angular module app app controller mainController function scope Data object scope

  • Jqplot 中两个系列数据的不同颜色条

    我想知道如何在 Jqplot 中为两个系列制作不同的颜色条 如果我只有一个系列数据 它的工作原理如下图所示 红色和绿色基于其值 但是 如果我有两个系列数据 我无法为每个系列数据配置两个系列颜色 目前我只能做这个图 我希望两个系列图可以根据其

  • 使用 word_number 值对 javascript 数组进行排序

    如何对数组进行排序 var arr new Array word 12 word 59 word 17 这样我得到 word 12 word 17 word 59 Thanks 您需要编写一个排序方法 您可以编写任何您喜欢的方法 该方法在

  • RequireJS 不遵循设置了 baseUrl 的 data-main 的相对路径

    使用 requireJS 我尝试为我的数据主指定一个与 baseUrl 不同的路径 看来 requireJS 会忽略我在文件名之前输入的任何内容 并始终在 baseUrl 文件夹中查找该文件 我有以下文件夹结构 index html scr

  • 为什么 JSON.stringify() 接受 Date 对象？

    至少在 Firefox 中 您可以对 Date 对象进行字符串化 gt gt gt JSON stringify now new Date now 2012 04 23T18 44 05 600Z 这是有效的 因为 在 Firefox 中

  • EJS - 包含返回找不到包含文件“header.ejs”

    我尝试像这样用 ejs 渲染 html const ejs require ejs fs require fs str fs readFileSync dirname mail templates test ejs utf8 console

  • contenteditable 在 safari 中不起作用，但在 chrome 中起作用

    我有一个奇怪的问题 这在 chrome 中按预期工作 但在 safari 中它只会发光 但不会对按键输入做出反应 这是触发文本版本的方法 var namebloc event currentTarget find column filena

  • Angular UI.Bootstrap 单选按钮在 ng-repeat 中表现得很奇怪[重复]

    这个问题在这里已经有答案了 我在 Angular 的 ui bootstrap 中动态生成无线电模型的选项时遇到问题 我想我可以简单地对数组进行 ng repeat 使用 btn radio 属性的内容 如下所示 in the contro

  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD

  • 无法在 postgres insert 中插入问号

    我正在尝试运行一个简单的 Postgres SQL 插入 insert into Resources values 1 How are you 但插入后的结果是 ID Data 1 How are you 1 我知道 要插入单引号等字符 我

  • 传单 - 导入 Geojson - Angular 6

    我尝试将 GeoJson 文件导入到 Angular 的应用程序 6 中的传单中 通过这个解决方案 我的 geojson 是在 leafletmap 中绘制的 但我有这个错误 我无法构建我的应用程序 有人知道一种解决方案吗 错误 TS234

  • Flot 0.8.2 折线图 - 颜色错误

    我正在使用 Flot 折线图并设置它们的颜色 我发现了一个奇怪的错误 在前 3 种颜色之后 绘图对所有其他线条使用最后一种颜色 这不是正确的行为 更有趣的是图例显示了正确的颜色 这是一个已知的错误 var dataSet label d1

  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中

  • html输入数字，min + step，使step忽略min？

    是否有可能使step忽略min属性

  • Node.js：将 repl 挂接到远程节点服务器

    假设我有一个节点服务器在 mysite com 上运行 有没有办法设置该服务器以便我可以使用节点的repl api http nodejs org docs latest api repl html to securely从我的本地计算机连

  • 如何在 Astro 中的组件之间共享状态？

    我相信我在代码中采用了错误的方法 如何在按钮单击中设置客户端首选项 该按钮单击用作全局 astro 组件中的道具 或者我应该怎么做 我知道这是可能的 因为 astro js 本身在他们的文档网站中这样做了 下面是我的尝试的解释 我目前正在开

  • jVectorMap - 向下钻取地图 - 自定义背景

    我正在使用 jVectorMap 中的向下钻取地图 并且尝试将自定义背景颜色设置为地图的第二层 为了自定义主级别 我使用 main 参数 但我不知道如何将其扩展到地图的较低级别 提前致谢 马切伊 None

  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep

  • 谷歌地图绘制两点之间的路线

    我编写了这段无辜的 JavaScript 代码 它允许用户创建两个标记并绘制它们之间的路线 它不起作用 相反 它给出了一个奇怪的错误 Uncaught TypeError Cannot read property ya of undefin

随机推荐

  • 计算机丢失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 的封装的一整套企业级中后台前端 设计解决方案 致力于在设计规范和基

热门标签