umijs创业项目（umi创建项目）

其实umijs创业项目的问题并不复杂，但是又很多的朋友都不太了解umi创建项目，因此呢，今天小编就来为大家分享umijs创业项目的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

1本文目录一览

• 1、初识UmiJS
• 2、umi + dva + ant-design-mobile快速搭建H5项目
• 3、基于umi的React项目结构介绍

2初识UmiJS

UmiJS官方文档

项目目录结构

hash

配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存

base

设置路由前缀，通常用于部署到非根目录

publicPath

配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以

outputPath

指定输出路径

title

配置标题

此外，你还可以针对路由配置标题，比如，

然后我们访问 / 标题是 Home ，访问 /users 标题是 Users ，访问 /foo 标题是默认的 hi

history

targets

配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换

proxy

配置代理

然后访问 /api/users 就能访问到 的数据

theme

routes

配置路由

3umi + dva + ant-design-mobile快速搭建H5项目

建议用UmiJS来构建项目，而不是用create-react-app，UmiJS几乎已经把需要用的配置、插件都已处理集成好了，可以省很多事。如果用create-react-app则基本是从0开始，所有配置都需要自己去处理，难度比较大。

UmiJS

mobile 例子

4基于umi的React项目结构介绍

本项目是基于umi搭建的，具体可以参考 Ant Design 实战教程（beta 版）

以下命令顺序执行，用来完成umi的初始化

然后，我们开始建项目的文件目录

修改package.json

我们运行 npm run dev 就能看到hello world.

现在我们使用的都是umi的默认配置，我们还需要自己的配置

添加 umi-plugin-react 插件

配置 config/config.js 文件

首先我们使用antd的Layout布局，修改src/pages/index.js

重新运行 npm run dev，页面就会显示出当前的界面

在pages下新建home.js文件

修改文件

保存后页面就会发生变化，Content中就会显示 Home的内容

在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，

直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。

在src/assets下新建文件夹

在src/pages/index.js 引用style.scss

在home.js同级新建home.scss 文件

在home.js引用，并修改render

用第二种方法的情况：

刷新页面发现并没有变化，打开浏览器调试窗口，查看sources

找到引用的css文件，搜索可以看到好像我们的样式确实是存在的，只不过被加上了其他的后缀(为了保证不会出现全局污染)

ps:这个问题当时我找了好久

这个是umi自己默认加上，我们并不想要这个东西，在config/config.js文件中添加配置

现在我们的项目只有一个home页面，我们多加几个，来实现跳转的功能

在home.js同级添加文件 center.js

修改home.js

修改config.js

点击页面的"个人中心"，即可跳转到个人中心页面

除了点击Link跳转页面外，我们还有其他的跳转需求，比如：返回上一个页面，或者登录后跳转。这些都可以算是事件跳转，

修改center.js

在umi中，redux是封装在dva中的，但是我们想用原始的那种redux (仅仅是个人原因)，我们就不去使用dva的模式。

在项目中actions文件主要用于处理请求、异步等，reducers文件则是处理数据以及其他的改变

在reducers目录下新建文件

因为在umi中会自动导入redux和react-redux包，所以我们不需要在安装，可以直接使用

store文件创建好了之后，修改pages/index.js

这样我们可以在所有的页面都使用store内容

修改 pages/home.js

重新启动 npm run dev

此时页面上看不到详情内容，

手动修改一下reducers/home.js 的isShowDesc值为true，保存之后在页面上就能看到详情内容

手动修改只是测试一下

下面我们来利用dispatch修改isShowDesc的值(这里不使用更简单的组件state属性来处理)

给home页面添加一个button，点击button来显示/隐藏详情

这样我们就能够点击按钮来改变详情的状态

网络请求使用fetch,使用mock模拟数据

安装 fetch、mockjs

封装一下请求方法，并使用mockjs模拟请求

在home.js中使用

保存，刷新页面后就能看到数据

Antd的主题定制有好几种方法，该项目是基于umi的，所以就是用umi配置的方法来定制。

在config/config.js 文件中添加配置

在src/assets/css 下新建theme.js文件

这里只修改一个属性值 (其他属性可以参考 文档 )

编译后，home页面的按钮主题就被修改了

至此一个基于umi的react项目结构就讲完了。

文章到此结束，如果本次分享的umijs创业项目和umi创建项目的问题解决了您的问题，那么我们由衷的感到高兴！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人，因此内容不代表本站观点、本站不对文章中的任何观点负责，内容版权归原作者所有、内容只用于提供信息阅读，无任何商业用途。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站（文章、图片、音频、视频）有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至3245813932@qq.com举报，一经查实，本站将立刻删除、维护您的正当权益。