提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
手动搭建基础的Umi框架。
一、创建项目文件夹
可以直接在目录下新建文件夹,也可使用mkdir myumi命令创建项目文件夹
二、在需要的文件夹下的终端输入
在需要生成项目的文件夹下,打开cmd 或者 终端 命令行输入 yarn create umi
E:\文件\react\myumi>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.
plugin - Create a umi plugin.
app,通用项目脚手架,支持选择是否启用 TypeScript,以及 umi-plugin-react 包含的功能
ant-design-pro,仅包含 ant-design-pro 布局的脚手架,具体页面可通过 umi block 添加
plugin,插件脚手架
可以使用上下箭头进行切换,在这里我切换到了app,然后回车
这时会出现提示,是否要使用typescript?可根据实际项目开发情况选择是否使用
? Do you want to use typescript? (y/N)
四、选择所需功能
接下来会给你提示,您希望启用什么功能,此项是多选,上下箭头进行切换,按空格键选中,选择完成按下回车
? 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:是基于 Ant Design 设计体系的 React UI 组件库。
dva:dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。
code splitting:代码拆分可以创建多个 bundle 在运行时加载。
dll:dll预编译提高webpack打包速度。
internationalization:国际化。
五、安装依赖
编译完成后,安装所需依赖项
E:\文件\react\myumi> yarn install
依赖安装所需时间会久一些,耐心等待。
六、运行
运行成功,到此项目搭建完成