React+umi+dva+antd入门兼项目搭建

React+umi+dva+antd入门兼项目搭建

    前言：React+umi+dva+antd是目前主流的前端框，本文章从零搭建一个React+umi+dva+antd的前端框架，供大家参考。

一 项目组成

• React

  React是前端三大主流框架之一。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件

• umi

  umi是可扩展的企业级前端应用框架。umi以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

  其实umi的作用说人话就是，在安装umi这一个依赖后，就可以立马启动开发，无需再安装react、webpack、react-router等，简称开箱即用。还有就是使用umi后项目的路由可以变得非常简洁明了。

• dva

  dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

  dva可以分为主要的三个部分，models、services 和 views。其中，views层负责页面上的展示；services层里面主要写一些请求后台接口的方法；models层存放了各种数据，并对数据进行相应的交互。

• antd

  Ant Design是一套企业级 UI 设计语言和 React 组件库，它内含超多的前端组件，例如Table表格、Modal弹窗、Tootip文字提示等等，antd把它们封装成了一个个的‘Html标签’，再配合这些组件的API，使得它们非常的方便灵活。

二 项目搭建

• 项目环境

  本项目是在win10操作系统下完成，且需要Node.js且版本大于大于等于 8.5.0。
  在后续操作汇总中我们要多次用到npm命令，npm是Node.js的包管理工具（package manager），故我们在项目开始前要先查看一下node版本和npm版本是否达标。

  node -v
  npm -v

• 搭建准备

首先在本地选择一个空文件夹，鼠标选中上面的地址输入cmd回车进入管理员模式

• 全局安装umi

  npm install umi -g

• 新建项目文件夹并进入项目文件夹

  mkdir umi_wy && cd umi_wy

• 执行umi命令

  npm create umi

• 选择umi模板信息

  • 运行完后会 让我们选择umi模板类型，这是我们选择第一项ant-desigen-pro

• 选完umi模板类型后，我们需要选择是否使用什么语言，这里我们选择TypeScipt，也就是ts，点击回车即选择成功

• 接着我们要选择哪种类型的脚手架，是完整的还是简单的，这里我们选择简单的，然后就搭建完成了。

• 项目搭建完成

  经过上门的一系列命令，项目就搭建完成了！！

  
  

• 注意事项

在执行 npm create umi 命令时 如果报错，这个时候需要者找到nodejs文件夹下的create-umi.cmd文件，因为每个人的文件地址不同，所以这里就不贴出图片了，选中这个文件反键点击编辑。如果看到以下内容，删除开头的 %~dp0\ 再在刚刚的命令行输入create-umi即可。

@"%~dp0\C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
@"C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*

三 项目详情

• 安装依赖并运行项目

  将文件拖入vsCode，打开终端输入以下命令

  npm i

  依赖安装完成后，输入

  npm start

  在网页打开地址，就可以看到我们构建的项目登陆页

  
  

输入账号密码，点击登陆就可以看到我们的首页，看到这里是不是很熟悉，这就是我们平时开发的项目的基本框架，我们再来看看代码，看一下熟悉不熟悉。

• 项目代码简介

  routes.ts 路由页

menu.ts 面包屑导航&&菜单文字文件

登陆页代码