Ant Design Pro入门教程 安装框架

介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro

脚手架安装完成,运行起来的样子:

这里写图片描述

下面我们来看看怎么安装这套后台管理系统

安装

有两种方式进行安装:
直接 clone git 仓库#

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

或者!使用命令行工具#
你可以使用集成化的命令行工具 ant-design-pro-cli

$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new  # 安装脚手架

安装完以上的其中一步以后:
本地开发#
安装依赖。

$ npm install

如果网络状况不佳,可以使用 cnpm 进行加速。

$ npm start

这里写图片描述

启动完成后会自动打开浏览器访问 http://localhost:8000,你看到下面的页面就代表成功了。
这里写图片描述

注意:
1.如果使用git 需要提前下载 安装 git
2.如果使用npm 需要提前下载 Node.JS

上述两个网站 进入 找对应版本,不做多余赘述。

  • 5
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Ant Design Pro 是一个开箱即用的企业级中后台前端/设计解决方案,它基于 Ant Design 设计体系,整合了大量的前端最佳实践,提供了丰富的功能组件和示例页面,能够帮助开发者快速构建高质量的中后台应用。 下面是一个简单的 Ant Design Pro 教程,帮助你了解如何使用该框架: 1. 安装 Ant Design Pro 首先,你需要安装 Ant Design Pro。可以通过 npm 进行安装: ``` npm install ant-design-pro-cli -g ``` 2. 创建项目 使用 Ant Design Pro CLI 创建项目非常简单,只需要执行以下命令: ``` pro new my-app ``` 其中,my-app 是你要创建的项目名称。 3. 运行项目 在项目创建完成后,进入项目目录并启动开发服务器: ``` cd my-app npm start ``` 4. 编写页面 在 Ant Design Pro 中,页面是通过组件和路由进行组织的。可以在 src/pages 目录下创建一个新的页面,例如: ``` // src/pages/HelloWorld.jsx import React from 'react'; const HelloWorld = () => ( <div>Hello, World!</div> ); export default HelloWorld; ``` 5. 添加路由 在 Ant Design Pro 中,路由是通过 config/router.config.js 定义的。可以在该文件中添加一个新的路由: ``` // config/router.config.js import HelloWorld from '@/pages/HelloWorld'; export default [ { path: '/', component: HelloWorld, }, ]; ``` 6. 编译打包 完成页面和路由的编写之后,可以通过以下命令进行编译打包: ``` npm run build ``` 7. 部署上线 最后,将打包好的文件部署到服务器上即可。 以上就是一个简单的 Ant Design Pro 教程。当然,Ant Design Pro 还提供了许多其他功能,例如国际化、权限控制、数据 Mock 等,可以根据自己的需求进行配置和使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值