Ant Design Pro入门教程，安装，运行（V5 Typescript版） |
您所在的位置：网站首页 › 主题库pro下载安装教程 › Ant Design Pro入门教程，安装，运行（V5 Typescript版） |
Ant Design Pro入门教程，安装，运行（V5 Typescript版）
|
【前言】
找了很多Admin模板，最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架，长这样（还行吧，目前挺主流的）： 官网地址：https://pro.ant.design/index-cn
该套模板是使用了React开发框架作为基础，AntDesign（蚂蚁金服开源UI组件库）作为UI库，集成了Dva，Umi，Mock等库，如果不是很了解这些内容，门槛还是比较高的，下面我们梳理一下从零开始运行起来这个项目的过程。 【准备环境】 node js 安装最新版即可 我的nodejs版本 v12.18.3 npm npm服务器在国外，访问比较慢，可以更换成国内源： npm config set registry https://registry.npm.taobao.org当然也可以安装cnpm（采用的国内源），使用时需要npm命令的地方都换成cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 【开始整Antd Pro】Ant Design Pro的安装方式有几种，可以自行选择： 1. git clone（稳定，没啥坑，速度偏慢github） git clone https://github.com/ant-design/ant-design-pro.git cd ant-design-pro npm install npm start 2. 官网推荐的方法新建一个空的文件夹作为项目目录，并在目录下执行： npm create umi然后等待安装依赖，完毕后会提示选择模板，我们选择第一个 ant-design-pro（完整的pro模板）： Select the boilerplate type (Use arrow keys) ❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.选择模板后，会弹出选择版本，我们选择v5（v5默认是typescript版本，也是antd pro的最新开发模式，v4可以选择javascript/typescript两种版本，如果不想用typescript方式，可以选择v4，然后再选择javascript即可。 Ant Design Pro 脚手架将会自动安装... 运行Antd Pro（Ant Design Pro，下文简称Antd Pro）安装教授架完毕后，执行命令: npm install npm start如果重试几次还报错，可以考虑换cnpm试试，我这就cnpm好使 cnpm install cnpm start
等待webpack building完成
我们打开浏览器输入 http://localhost:8000 即可看到初始页面，大概长这样：
可能我们想参考官网展示的大量组件的代码，那么，我们如何得到官网这个较为完整的效果呢？
其实很简单，在启动的时候，我们加个参数 fetch:blocks ，会自动安装完整的组件到我们的代码中 cnpm run fetch:blocks输入命令会执行漫长地下载安装过程，安装完毕后，重新启动即可 【简单介绍一下】 目录结构Antd Pro 已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。 ├── config # umi 配置，包含路由，构建等配置 ├── mock # 本地模拟数据 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地静态资源 │ ├── components # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 业务页面入口和常用模板 │ ├── services # 后台接口服务，请求服务端接口的都放在这里 │ ├── utils # 工具库 │ ├── locales # 国际化资源 │ ├── global.less # 全局样式 │ └── global.ts # 全局 JS ├── tests # 测试工具 ├── README.md └── package.json 内置模板 - Dashboard - 分析页 - 监控页 - 工作台 - 表单页 - 基础表单页 - 分步表单页 - 高级表单页 - 列表页 - 查询表格 - 标准列表 - 卡片列表 - 搜索列表（项目/应用/文章） - 详情页 - 基础详情页 - 高级详情页 - 结果 - 成功页 - 失败页 - 异常 - 403 无权限 - 404 找不到 - 500 服务器出错 - 个人页 - 个人中心 - 个人设置 - 图形编辑器 - 流程图编辑器 - 脑图编辑器 - 拓扑编辑器 - 帐户 - 登录 - 注册 - 注册成功 代码结构基本长这样
模板内建了模拟数据、HMR 实时预览、状态管理、国际化、全局路由等等各种实用的功能辅助开发，想要了解更多可以访问官网（目前比较粗糙） 官网地址：https://pro.ant.design/index-cn |
【本文地址】
今日新闻 |
推荐新闻 |