React之umi框架项⽬搭建
提⽰：⽂章写完后，⽬录可以⾃动⽣成，如何⽣成可参考右边的帮助⽂档
⽂章⽬录
前⾔
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，然后回车react开发框架
这时会出现提⽰，是否要使⽤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
依赖安装所需时间会久⼀些，耐⼼等待。
六、运⾏
运⾏成功，到此项⽬搭建完成

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。