• react与umi


    我们知道umi 是一个编译工具,但它同时也是一个前端框架。它对社区的 webpack,react-router 等进行的封装,
    使得我们可以基于它快速搭建一个 React 项目。
    第一步:安装umi

    第二步:创建目录,并写入配置


    在 umi 中,约定的存放页面代码的文件夹是 pages,是复数,不过我们可以添加 singular 为 true 来让 page 变为约定的文件夹。
    接下来让我们创建第一个页面组件

    这样第一个页面就创建完成了。
    接下来我们就可以通过 umi 来启动代码了。
    首先需要在 package.json 中的 scripts 里面添加两个命令。

    第三步:运行项目


    如果我们要自己配置路由,我们会怎么配置呢?

    再运行项目我们就可以看到

    当有了 routes 的配置之后 umi 就不会再执行约定式对应的路由逻辑了,而是通过配置声明的路由。
    第四步:添加 umi-plugin-react 插件
    umi 是一个可插拔的企业级 react 应用框架,它的很多功能都是通过插件实现。尤其是 umi 官方的 umi-plugin-react 这个插件
    集成了常用的一些进阶的功能。
    首先通过 cnpm install umi-plugin-react --save-dev 来安装该插件集。然后在配置文件 config/config.js 中引入该插件:

    第五步:构建和部署
    我们可以通过来构建和部署项目。
    我们可以看到增加了一个dist目录

    我们可以继续发散一下子,如果我们在项目里面定义一个父子组件,又该怎么样进行demo呢?

    再定义一个子组件ShoppingList


    最后看我们的运行结果

    详细demo可以见我的github:https://github.com/JserJser/reactWebApp/tree/master/antd-course
    本文借鉴自博客:https://www.yuque.com/ant-design/course

  • 相关阅读:
    Python基础-序列化模块
    dubbox
    小型供销系统
    MyBatis与SpringBoot整合案例(一)
    SpringBoot第二节
    SpringBoot第一节
    Dubbo案例SSM整合
    Dubbo生产者和消费者
    Zookeeper实战分布式锁
    Zookeeper Watcher和选举机制
  • 原文地址:https://www.cnblogs.com/smart-girl/p/9706277.html
Copyright © 2020-2023  润新知