Ant Design Pro 环境搭建

简介

ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架。ant design pro 就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架

官网 https://pro.ant.design/

文档 https://pro.ant.design/docs/getting-started-cn

https://gitee.com/ant-design/ant-design-pro

环境

安装Nodejs

http://nodejs.cn/

npm修改配置

$ npm config set prefix"D:\Devs\nodejs\node_modules\npm\node_global_modules"

$ npm config set cache"D:\Devs\nodejs\node_modules\npm\node_cache"

修改npm源为淘宝源

$ npm config set registry https://registry.npm.taobao.org

切换回官方源

$ npm config set registry http://www.npmjs.org

cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

create-react-app 项目构建工具

$ cnpm install -g create-react-app

Umi 乌米 可插拔的企业级 react 应用框架

$ npm install -g umi

create-umi 项目构建工具

$ npm install -g create-umi

yarn 比npm更好用的包管理

$ npm install -g yarn

tyarn 国内源版本的tyarn

$ npm install yarn tyarn -g

开发工具

React Developer Tools

谷歌浏览器插件

使用代理进入chrome插件商店安装

Umi UI 可视化项目的本地研发工作台

• 项目管理。集中式管理本地项目。
• 配置管理。umi / bigfish 常用项目配置。
• 任务管理。集成启动、构建、测试、代码规范检查、重新安装依赖等常用操作。
• 资产、区块管理

在项目中执行

$ yarn add @umijs/preset-ui -D

$ umi dev

项目创建

react项目

使用create-react-app创建react项目

$ create-react-app my-app

启动项目

$ cd my-app
$ npm start

编译生产版本

$ npm run build

Ant Design 组件库

$ yarn create react-app 项目
# 进入到项目目录, 引入 antd
$ yarn add antd
# 初始化环境
$ yanr
# 运行项目
$ yarn start

And Design Pro V4

创建项目

$ yarn create umi antd_pro
$ # 或者
$ npm create umi antd_pro

安装Umi UI 可视化项目的本地研发工作台

$ yarn add @umijs/preset-ui -D
# 或者
$ npm install --save @umijs/preset-ui

进入到项目目录antd_pro , 初始化环境

$ npm install
$ # 或者
$ yarn

运行项目

$ npm start
$ # 或者
$ yarn start

运行Umi UI 管理工作台

$ umi dev