您的当前位置：首页>全部文章>文章详情

【AntDesignPro】Ant Design Pro学习记录—搭建AntDesignPro脚手架

CrazyPanda发表于：2023-11-22 20:42:19浏览：580次TAG： #前端 #antd #AntDesignPro

文章目录

一、操作过程

2.完成后配置软连接

前言

工作项目需要，使用了AntDesignPro开发，在此做一个学习研究记录。

一、操作过程

参考官网开始使用 - Ant Design Pro🏆 让中后台开发更简单包含 table form 等多个组件。https://pro.ant.design/zh-CN/docs/getting-started

在node.js npm yarn 环境配置好之后，按照官网操作运行

1.初始化

npm i @ant-design/pro-cli -g

2.完成后配置软连接

ln -s /usr/local/nodejs/bin/pro /usr/local/bin/

3.继续执行

pro create myapp

接下来和官网一样，会让选择umi@3/umi@4,这里选择umi@3,然后选择完整版本complete，运行完成

4.进入应用

cd myapp

5.安装依赖

yarn

6.启动

yarn start

运行结果

猜你喜欢

: 【AntDesignPro】Ant Design Pro学习记录—默认主题配色修改;  版本： Ant Design Pro V5先参考下官网定制主题 - Ant Design再参考这篇文章antd pro 修改全局样式_tankpanv的博客-CSDN博客_antd修改全局样式最后自己实验：第一步，在config.ts文件中配置theme: {     'primary-color': defaultSettings.primaryColor,   },这种配置需; 发表于：2023-11-28 浏览：776 TAG：

: 【React】使用React实现一个内容滑动组件; 最近在做项目时遇到一个需求，需要让一个列表能够通过点击按钮进行滚动，每次都是一屏的距离，不足则结束。并且，这个列表项是在react-grid-layout中的某一个模块内。所以包裹这个列表的容器会随时发生变化。在完成这个组件后，通过这篇文章总结一下。UI/原型分析那么从上面的功能描述以及项目中的UI，我们可以分析得到这样一个假想图：我们需要实现一个容器来作为我们的可视区域，并且这个容器是可以伸缩的。列表内容如果超出容器的可视区域，那么就会被隐藏。需要左右都有按钮，来支持用户左右滑动内容来查看，每; 发表于：2024-04-10 浏览：317 TAG：

: 【AntDesignPro】使用高德地图设置考勤区域; 参考高德开放平台https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react功能要求：使用AntDesignPro开发系统管理端，考勤模块需要设置APP考勤打卡区域，需要页面显示地图定位并设置考勤范围（地图上画圈），以便APP在画圈范围内打卡使用。1、准备2、下载react类组件代码参考官网流程，可正常加载出地图组件，下面是我的页面和组件文件组件文件3、安装并引入AmAP Loadernpm i @ama; 发表于：2023-12-14 浏览：737 TAG：

: 【React】React中Typecript的使用; 目录一、创建React的TypeScript项目二、使用差别1、基本使用2、Props传值的差别3、State传参三、总结一、创建React的TypeScript项目见：如何在React项目中引入TypeScript？_duansamve的博客-CSDN博客二、使用差别1、基本使用其基本使用和javascript编写React项目时差不多这是一份.tsx文件代码：可以看到和之前的.jsx使用并无太大差别import React, { Component }; 发表于：2023-12-05 浏览：689 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—自定义菜单选中; 页面增删改查，打开子页面时，要让父页面菜单选中，参考官网给出的方案菜单的高级用法 - Ant Design Pro 使用的V5版本，直接设置 parentKeys:['/product'] 即可export default [   {     path: '/product',     // 不展示菜单  ; 发表于：2023-11-28 浏览：755 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—前后端一体化部署; 目录前言一、系统配置二、ant design pro访问路径配置三、站点访问路径配置前言好长时间没记录了，使用ant design pro有一年了，期间陆续做了好几个项目，从陌生到熟练，还有好多钻研成果没记录，后续有时间陆续补上。之前几个项目一直是前后端分开部署的，需要配置两个站点域名访问，还要解决跨域session问题，这次把一体化部署记录一下。一、系统配置服务端用的LNMP，使用tp6框架，使用宝塔面板管理。tp站点先正常部署，步骤省略，见下图：配置网站目录和运行目录： 编辑配置伪; 发表于：2023-11-28 浏览：818 TAG：

: 【AntDesignPro】AntDesignPro使用原生js，箩筐地图的使用; 项目需要把高德地图替换成箩筐地图，WEB前端使用的ant design pro，高德地图有相关的react demo，而箩筐地图只有原生js，结合上一篇文章【AntDesignPro】使用高德地图设置考勤区域，把高德地图修改为箩筐地图，实现考勤范围设置。1 html使用箩筐地图参考上一篇文章【html】箩筐地图的使用，设置考勤范围，了解实现考勤范围设置需要用到的箩筐地图接口。2 ant design pro加载原生js这个是实现功能的核心，只有js正确加载上了，地图的功能才能够正常使用。结合an; 发表于：2024-02-08 浏览：465 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用（四）; 一、 ModalForm自定义footer按钮参考官网，Modal弹框是可以自定义按钮的，原想着ModalForm的modalprops可以设置自定义footer，结果设置一直不生效，最终还是使用Modal嵌套了ProForm实现了功能，在此记录一下。ant design pro使用的V5版本。1、Modal自定义footer参考官网https://ant-design.antgroup.com/components/modal-cn?from=msidevs.net#components-mo; 发表于：2024-02-20 浏览：353 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ProTable的使用（三）; 一、自定义检索条件部分列表页需要做一些简单的数据汇总统计，并能够跟随检索条件自动变化，protable自带的功能没有找到对应的实现方法，最后决定自己来实现这个功能。1、关闭ProTable自带检索功能search={false}2、自定义检索表单在ProTable上方加入自定义表单<Card bordered={false} style={{ marginBottom: 15 }}>     ; 发表于：2024-02-20 浏览：477 TAG：

: 【AntDesignPro】L7Plot地理可视化组件的使用; L7Plot介绍L7Plot 基于 L7 实现的开箱即用地理空间数据可视化图表库L7Plot 专注于地理可视化图表。以声明配置式的方式，降低用户使用成本；以常见地理图表分类的方式，降低用户选择成本；内部集成全国行政区域数据，降低用户使用地理数据心智；支持多图层及多图表层叠，方便用户定制复杂的业务场景；L7Plot 专注于地理数据可视化展示，不会涉及数据编辑能力。前言项目需要，使用antdesignpro做前端，并绘制可视化大屏，回执地图组件，于是使用了L7Plot。功能目的绘; 发表于：2023-12-14 浏览：657 TAG：

栏目分类全部>

推荐文章

