umijs多环境配置_AntDPro专题(2)环境配置+HelloWorld demo

一、前序准备#

你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

二、环境准备#

环境依赖 NodeJS 。

1.安装 NodeJS

请访问 https://nodejs.org/ 下载安装最新版的 NodeJS。

安装完成后你可以通过运行 node --version 来确认安装成功，如下图所示：

请确保你的 NodeJS 版本是 8.5.0 以上。

2.安装antd脚手架代码

从 GitHub 仓库中直接安装最新的脚手架代码。
$ git clone --depth=1 https:// github.com/ant-design/a nt-design-pro.git
$ cd ant-design-pro

--depth=1表示只下载最新的一个版本

三、本地启动服务#

安装依赖。

$ npm install

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

$ npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

四、本地新建菜单，展示helloworld#

编写第一个菜单页面，展示helloworld。

router.config.js配置菜单路由

src/pages/Sow/AddSow.js编写代码逻辑

编写如下代码，展示效果如后图：

代码分析如下：

import React from 'react';//引入React框架 
import styles from './style.less';//引入style样式  
class AddSow extends React.Component{//继承React的Component组件     
render(){//渲染页面         
return(//返回内容             
<h1>hello world!</h1>//类html语言，jsx（js的语法扩展，可直接识别html格式并展示）         
);     
} 
}

export default AddSow;