umi+dva+antd小白成长之路（一）

纯新小白的各种问题，各种疑问，各种搜索，找方法，找捷径，想快速上手。

收集资料

相关网站
1、umijs学习链接（https://umijs.org/）；
2、dva学习链接（https://dvajs.com/）；
3、antd学习链接（https://ant.design/）；

配置系统环境

下载软件及配置系统环境
1、安装node（http://nodejs.cn/download/）根据自己的系统，下载匹配的node软件；
配置方法：最好安装软件到 “D” 盘或其他盘符，以便节省系统盘空间，然后打开 “CMD” 工具
输入 “node-v” 和 “npm-v” 查看安装版本和验证是否安装成功，接下来在自己的安装node的目
录内新建node_global（全局路径）和node_cache（npm包缓存）两个文件夹，然后在 “CMD”
内输入

npm config get prefix"新建node_global文件夹的路径 "
npm config get cache"新建node_cache文件夹的路径"

还需要添加系统环境变量：
添加用户变量中的Path"新建node_global文件夹的路径 "
新建环境变量名"NODE_PATH"，变量值是"node_modules文件夹的路径"
添加环境变量Path值"%NODE_PATH%"完成后点确定。
2、安装git工具（https://git-scm.com/）用于使用开箱即用的中台前端/设计解决方案
（ANT DESIGN PRO）
3、下载传说中的Visual Studio Code编辑器（https://code.visualstudio.com/）这里就不多
讲了，以后备用，下面简称VS Code；

项目搭建

手动新建项目文件夹或使用命令新建文件夹
打开 “CMD”

mkdir myapp
cd myapp

#官方推荐
# yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v（查看版本）
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v（查看版本）
上面2选1即可

#脚手架创建创建基础模板
#执行
yarn global add umi
#等待安装umi
#安装完成后
yarn create umi

? Select the boilerplate type (Use arrow keys)
> ant-design-pro  - Create project with a 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.

选择模板类型？
ant-design-pro（创建项目 layout-only ant-design-pro模板,与umi块一起使用）
app （应用程序 用一个简单的样板文件创建项目,支持typescript）
block （创建一个umi块）
library（用umi创建一个库）
plugin（创建一个umi插件）

一般情况下选择 “app” 选项后回车

Do you want to use typescript? (y/N) 
#是否选择支持typescript

如果对typescript有了解则选择Y

? What functionality do you want to enable? (Press  to select,  to toggle all,  to invert selection)
>( ) antd
 ( ) dva
 ( ) code splitting
 ( ) dll
 ( ) internationalization

你想要什么功能启用？
antd 是蚂蚁金服的React UI框架
dva数据流
代码拆分
dll
国际化

用空格选中（多选）所需要的功能后回车等候下载。

最后下载yarn依赖

yarn
#等待yarn依赖下载
#下载完成后
yarn start
#基础项目就跑起来了