ant.design pro：在VSCode里创建一个antd pro项目

已于 2022-02-07 18:03:15 修改
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 四. 测开之接口自动化平台+性能平台（自用） 文章标签： vscode react.js antd pro
于 2021-10-19 17:01:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sulia1234567890/article/details/120848721
本文指导如何在VScode中通过Yarn快速搭建一个基于Ant Design Pro V4的TypeScript简单项目。首先运行'yarn create umi-auto-platform'创建项目，选择AntDesignPro、ProV4、TypeScript和antd@4选项，然后进入项目目录并运行'yarn start'启动项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. antd pro的背景知识

可参考此文：接口自动化平台（一）：antd + antd pro 安装和简介

【说在前面: 具体的操作命令，可能会随着官网的更新而更新，一切以官网的为准。】

2. VScode里面创建一个antd pro项目

（1）yarn create umi auto-platform (项目名称auto-platform，可自己定义)

（2）依次选：Ant Design Pro， Pro V4, TypeScript,  simple, antd@4

（3）cd auto-platform

（4）yarn

（5）yarn start

 

猿创征文 |【Ant Design Pro】使用ant design pro做为你的开发模板（五）去除无效代码，生成一个清晰的开发模板
梦想成为全栈的切图仔
09-07 755
本次终于写到了第五章了，前面四章节，我们从一个全新的 umi3 的ant design pro 模板开始着手，我们以一个初始者要用它的思想介入，逐步走了新增路由、cssmodules、国际化语言切换、使用mock数据进行快速开发、联调正式接口、初始化配置、登录修改、接口文件提取等等。这次到第五章了，我们暂时不做新的改变，我们来把之前写的一些杂项收拾收拾，比如，清除一些不需要的代码，规范一些东西，让我们的项目成为我们的快速开发模板。
零、Ant Design Pro 开始
JimmyTsai75的博客
01-01 3124
第一次采用ProLayout的时候也担心会不会不够灵活，比如我需要修改折叠按钮（collapsed）的位置能不能实现，带着这种猜疑，我进入官网，我的担心立刻解除，他们竟然直接就有了类似的demo: （可以进入以下网址，查看具体示例代码）https://procomponents.ant.design/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-collapsed。
Ant Design Pro V5开发系列：（一）vscode常用技巧整理
热水钟博客
06-21 1212
1.vscode顶部如何显示当前文件完整的路径信息（为了看到自己打开是）？
【亲测免费】 Ant Design Pro For VSCode 插件使用教程
gitblog_00218的博客
08-07 1522
Ant Design Pro For VSCode 插件使用教程 项目介绍 Ant Design Pro For VSCode 是一个为 Ant Design 开发者提供的 Visual Studio Code 插件。该插件旨在提高开发者在使用 Ant Design 框架时的开发效率，通过提供详细的文档提示、属性提示、过期属性提示和自动修复等功能，帮助开发者更快速地配置项目和组件。 项目快速启动 ...
Ant Design Pro for VSCode 安装与配置完全指南
gitblog_01282的博客
10-18 1347
Ant Design Pro for VSCode 安装与配置完全指南 项目基础介绍 Ant Design Pro for VSCode 是一个专为提高前端开发者效率而设计的Visual Studio Code插件。它由Ant Design团队维护，主要服务于使用Ant Design和Umi框架的项目。该插件通过提供诸如智能跳转、配置文件提示、属性类型及过期属性警告等功能，大大简化了Ant Des...
Ant Design Pro For VSCode 插件下载及安装教程
最新发布
gitblog_01292的博客
10-18 1140
Ant Design Pro For VSCode 插件下载及安装教程 1. 项目介绍 Ant Design Pro For VSCode 是一个专为 VSCode 设计的插件，旨在提升开发者在使用 Ant Design 和 Umi 框架时的开发体验。该插件提供了多种实用功能，包括路由跳转、配置文件提示、属性提示、过期属性提示及自动修复等，帮助开发者更高效地进行项目开发和维护。 2. 项目下载位置...
vscode里利用prettier插件实现ant-design-pro架构代码的格式化
埃尔斯的博客
05-13 7588
这里写自定义目录标题欢迎使用Markdown编辑器一、给vscode编辑器安装prettier插件。二、配置IDE编辑器的配置。 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 一、给vscode编辑器安装prettier插件。 打开IDE...
Ant Design Pro 2.0.0：前端设计解决方案深度解析
Ant Design Pro 2.0.0 的开箱即用特性意味着开发者可以在不进行复杂配置的情况下，快速启动一个中台前端项目，大幅降低项目启动时间和开发成本。同时，它还支持国际化、主题定制、权限控制等多种企业级功能，为中...
docker实践——部署ant design pro项目
Mr_Ying的博客
05-13 1549
只对前端进行部署！！
Ant Design Pro For VSCode 插件使用教程
gitblog_00069的博客
08-07 544
Ant Design Pro For VSCode 插件使用教程 项目目录结构及介绍 Ant Design Pro For VSCode 插件的 GitHub 仓库地址为：ant-design/antd-vsce。以下是该项目的目录结构及其介绍： antd-vsce/ ├── dist/ │ └── extension.js # 主文件 ├── src/ # 源代码...
记录萌新的一次Ant Design Pro开发环境搭建
吖吖学语的博客
07-06 1868
Ant Design Pro开发环境搭建前端学习环境搭建1.安装Node.js2.安装Visual Studio Code3.安装Ant Design Pro V5功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前端学习 萌新学习
AntDesignPro快速入门
qq_40098572的博客
11-04 1289
项目创建好了，打开一看，这么多目录无从入手啊，然后看官方文档，又要去了解umi，又要去了解typescript，等等各种前置条件，其实都没有必要，那么多东西如果不是职业前端开发的话怎么可能都会呢，这是不可能的。学习代码很简单，找对思路是关键，当我们看到一个项目的时候，总想着打开项目看一下代码，一看代码两眼发黑，互联网时代不可能把认识所有代码，当我们接触一个项目的时候，先看项目目录结构，对着目录结构写一套增删查改就算是入门了。安装环境node+vscode。整个项目介绍完毕，是不是很简单。
配置VSCode的TypeScript环境
m0_45406092的博客
06-22 3154
环境 Node.js 首先需要 安装Node.js： cmd 中输入 npm -v ，查看版本 D:\test1\mytest>npm -v 3.10.10 如果没有报错说明安装了 Node.js 否则 ，从网上下载并安装！ 配置 查看全局安装的位置，找到 .npmrc 修改即可 prefix = E:\nodejs\npm_global_modules 也可通过npm config ls查看配置文件的位置及内容 user-agent = "npm/3.10.10 node/v6.11.
ant design pro 6.0搭建教程
不忘的博客
05-25 1215
注意：这里可能说你没有pro命令，这确实没有，只是安装了全局的npm i @ant-design/pro-cli -g。注意：选择umi@3时，使用node.js 18版本的会报错，可以实践一下，这里就不再进行实践了。npm run start 这只是预览mock中的数据，并没有后台。或者找到pro命令的目录位置，在创建项目时带上目录路径。安装完成后，即可执行启动命令，来预览mock数据。如果你想调后台接口，并进行调试，请看下一篇教程。注意：建议通读官方文档，这样更好理解和使用。输入用户名：admin。
Ant Design pro入门
MC_666的博客
02-23 5992
读此文章需要优先掌握知识:React、ts、ant-design
2.Ant Design Pro V2 的第一个菜单
Gskull的博客
09-17 4219
准备 正式开发前需要准备一个IDE，如果是用纯记事本的大神请忽略 可以选Sublime和VsCode等，找个自己用过的顺手的 反正我都没用过，跟随我软的脚本我就选VsCode把 在VSCode里添加一个工程，选定上一章克隆下来的工程文件夹目录 然后再保存下工程文件 开始 Ant Design Pro的前端框架是阿里自己弄的UmiJS 菜单配置可以看下官方的文档 它 的菜单配置在c...
react-ant vscode 插件
周家大小姐
03-30 1997
插件 Ant Design Snippets 如果生成layout快捷键 antlayout + enter function IndexPage() {//布局生成快键antlayout + enter return ( <Layout> <Header>header</Header> <Layout> ...
ant-design-pro-master 学习笔记之菜单配置
徐行之的博客
01-04 1755
项目框架： React Redux-soga UmiJs DvaJs AntDesign 前端UI库 环境搭建： NodeJs VSCode 代码编辑器 项目运行 从github下载ant-design-pro-master 项目，导入到vscode，打开终端，在项目根目录下执行npm install 安装依赖 执行npm run start 启动项目 菜单配置 在src/pa...
ant design pro 代码学习(一) ----- 路由分析
热门推荐
夕阳枫的博客
06-13 1万+
1、一级路由 const routerData = getRouterData(app); const UserLayout = routerData['/user'].component; const BasicLayout = routerData['/'].component; return ( &amp;amp;amp;amp;lt;LocaleProvider locale={zhCN}&amp;amp;amp;amp;g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值