小白成长之路（一）序言

收集资料配置系统环境项目搭建 纯新小白的各种问题，各种疑问，各种搜索，找方法，找捷径，想快速上手。

收集资料

相关网站 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 <space> to select, <a> to toggle all, <i> to invert selection) >( ) antd ( ) dva ( ) code splitting ( ) dll ( ) internationalization

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

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

最后下载yarn依赖

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