技术标签: umi react.js 前端框架 前端 react javascript
先确保全局有yarn,全局安装umi依赖,另外可以使用国内源tyarn下载(后面文档中可以自行将yarn改成tyarn进行使用),加快速度。
npm i yarn tyarn -g
yarn global add umi
新建项目并进入项目文件夹,创建项目。
mkdir myapp && cd myapp
yarn create umi
选择项目时选择ant-design-pro
。
? 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.
然后js
和ts
按喜好选择,我这边图省事选择js
。
最后选择complete
。
创建好之后下载依赖包。
yarn install
然后启动
yarn start
├── config # umi 配置,包含路由,构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
登录页在src/user/login/index.jsx
,我们点进去会发现,它配置了国际化的语言,利用的是umi封装的useIntl
,formatMessage()
里面传一个带id的对象即可。
import {
useIntl} from 'umi';
...
const intl = useIntl();
...
<LoginForm
logo={
<img alt="logo" src="/favicon.ico"/>}//可以修改你登录页展示的网站图标
title='可以修改成你登录页展示的网站名'
subTitle={
intl.formatMessage({
id: 'pages.layouts.userLayout.title',//Ant Design Pro
})}
initialValues={
{
autoLogin: true,
}}
...
onFinish={
async (values) => {
await handleSubmit(values);
}}
>
这些语言,在国际化locales
文件夹,默认显示的是中文的,也就是在locales/zh-CN
,例如pages.layouts.userLayout.title
在zh-CN的pages.js文件中,第一条就是。
export default {
'pages.layouts.userLayout.title': 'Ant Design 是西湖区最具影响力的 Web 设计规范',
'pages.login.accountLogin.tab': '账户密码登录',
'pages.login.accountLogin.errorMessage': '错误的用户名和密码(admin/ant.design)',
'pages.login.failure': '登录失败,请重试!',
...
}
如果我们想要配置国际化,就在这里修改之后,将其他国语言的相应句子写在对应的文件夹文件中,umi的国际化配置了八种语言。
favicon.ico
文件即可。config/defaultSettings.js
文件,可以进行修改。defaultSettings.js
文件,而且有一个可以自定义主题的网址:ant Design Pro 主题配置,只要将拷贝来的配置对象与原对象对比修改对应内容即可。/app.jsx
中的水印句。document.ejs
中修改。项目默认自带了一个导航来显示路由,当然不同的主题中不一样,路由位置也可以在上边。
umi
路由是约定式的,在pages
文件夹中,文件路径就是路由,但是有人会提出疑问:那登录页明明也有路由,怎么不在导航中?,我们知道登录页肯定不应该作为导航的,这是可以配置的,在config/config.js
中有一个routes
对象,路由都在这里。
我们可以看见不存在于导航的user的配置,layout属性设置为false,而存在于导航的dashboard没有设置这个,而是设置了name和icon。
我们尝试把user的layout属性注释掉,并且也设置上name,再借用一下dashboard的图标,这下就出现在导航里了。(ps:登录页肯定还是不要出现在导航中比较好)
这下我们也会添加路由了(去src编写对应文件夹,再编写路由配置),并且可以根据这个页面的作用,选择需不需要添加在导航中,路由配置全属性如下:
name:string
配置菜单的 name,如果配置了国际化,name 为国际化的 key。icon:string
配置菜单的图标,默认使用 antd 的 icon 名,默认不适用二级菜单的 icon。access:string
权限配置,需要预先配置权限hideChildrenInMenu:true
用于隐藏不需要在菜单中展示的子路由。hideInMenu:true
可以在菜单中不展示这个路由,包括子路由。hideInBreadcrumb:true
可以在面包屑中不展示这个路由,包括子路由。headerRender:false
当前路由不展示顶栏footerRender:false
当前路由不展示页脚menuRender: false
当前路由不展示菜单menuHeaderRender: false
当前路由不展示菜单顶栏flatMenu: ture
子项往上提,只是不展示父菜单Html5
即可。(如果未显示出来可能是缓存问题,删除src下的.umi重新启动项目即可)README.md
,其他都是根据src文件夹下的md文件生成的,比如组件文档就指向components/index.md
,我们可以试着在pages下写一个md文件,自动生成了对应的文档。如果想写自己的个人博客网站,必不可少的页面中插入文档,这些项目都封装好了,我们只需要将md文件当作react组件引入。
因为在src下创建md会被带去默认文档,因此我们可以选择在根目录创建一个mds文件夹保存md文件。
比如我们将默认的dashboard的analysis页修引入文档展示用于测试。(修改pages/dashboard/analysis/index.jsx)
...
import TestMd from '@/../mds/test.md'
const Analysis = () => {
...
return (
<GridContent>
<TestMd/>
</GridContent>
);
};
export default Analysis;
效果
如果觉得文章还不错的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~
文章浏览阅读145次。10.21终面已参加,希望能顺利通过终面拿到offer~一共三轮,电话面试+笔试+视频面试,视频面试3V110月19日投的新媒体运营的简历,HR说因为是周末,等工作日再联系我,在周一下午三点我接到了电话成功通过简历筛选和电话面试,整个电话面试的过程长,大概10分钟左右,因为前期稍微做了一些准备,所以还算对答如流,整个过程顺利,HR现场告诉我通过面试,并随即给我发了笔试题,让我准备一下,最晚三天之..._网易 python游戏服务器
文章浏览阅读6.5k次,点赞12次,收藏38次。MVC层次划分简述写在前面的一段话:首先要知道MVC和三层架构之间有什么关系:MVC:【 Model(数据模型) - View(视图) - Controller(控制器) 】三层架构:【 Presentation tier(展现层) - Application tier(应用层)+Date tier(数据访问层) 】很多人都有一个误解,认为Spring MVC的M、V、C对..._mvc分层
文章浏览阅读2.9k次。实践flink数据集sink到cassandra3_flink cassandra
文章浏览阅读7.1k次,点赞4次,收藏12次。文章目录一、前言二、codimd是什么?2.1 源于hackmd的超好用markdown编辑器2.2 codimd的作用三、安装和使用3.1 安装前需要知道的3.2 安装步骤3.2.1 创建数据库3.2.2 安装git3.2.3 安装docker3.2.4 安装docker compose3.2.5 安装codimd3.2.6 检查是否安装成功3.2.7 放行端口3.2.8 测试使用3.3 开始写..._群晖 docker 搭建 codimd
文章浏览阅读335次。Json json 可以定义多种类型 var jsonObj = { "key1":123, "key2":"name", "key3":[12,"age",true], //数组 "key4":false, "key5":{ //存一个json对象 "key6":456, "key7":"number" }} json其实就是一个Object对象, 他的key值 可以看成对象的一个属性, 获取他的value值...
文章浏览阅读87次。选题背景:超市账单管理系统是一种针对超市行业的管理工具,旨在提供高效、准确、便捷的账单管理服务。随着城市化进程的加快和人们生活水平的提高,超市作为日常生活必需品的主要供应渠道之一,扮演着重要的角色。然而,传统的超市账单管理方式存在一些问题,如手工记录容易出错、数据整理繁琐、信息不透明等。因此,开发一个科技化的超市账单管理系统成为了必要之举。选题意义:首先,超市账单管理系统的开发可以提高账单管理的效率。传统的超市账单管理方式通常需要员工手动记录商品销售信息,并进行数据整理和汇总。这种方式容易出现人为错
文章浏览阅读1.7k次。书签栏通讯 s7-1200与s7-200smart通讯-工业支持中心-西门子中国IO_deviceS7-1200PROFINET通信ET 200SP 安装视频 - ID: 95886218 - Industry Support Siemens云平台接入在线文档 - 低代码开发嵌入式设备 | 物一世 WareExpress在linux下使用c语言实现MQTT通信(一.MQTT原理介绍及流程图)_qq_44041062的博客-程序员宅基地C mqtt_百度搜索开发快M_拾度智能科技 att7022eu
文章浏览阅读1.6k次。职称英语全称为全国专业技术人员职称英语等级考试,是由国家人事部组织实施的一项国家级外语考试。1.概述全国专业技术人员职称英语等级考试是由人力资源和社会保障部组织实施的一项外语考试,它根据英语在不同专业领域活动中的应用特点,结合专业技术人员掌握和应用英语的实际情况,对申报不同级别职称的专业技术人员的英语水平提出了不同的要求。该考试根据专业技术人员使用英语的实际情况,把考试的重点放在了阅读理解上面。全..._全国专业技术人员职称英语等级考试 北京 取消
文章浏览阅读42次。恋爱指导篇 知心的小爱“真爱”是一个永不过时的话题,古代的人找对象,靠的是媒妁之言,父母定婚姻。现代的人靠的是相亲,自由恋爱,按理找一个喜欢的人结婚会很幸福,近几年反而离率更高了。古代人认识的人少,交流工具少,最多信鸽传书,信物传情。现代要认识一个人很容易了,最初是电话信息联系。前几年是qq,微信摇一摇,近两年是抖音,快手随便找一找。虽然找对象,寻伴侣更方便了,为何大部分人还是感觉更迷茫,不快乐...
文章浏览阅读109次。【代码】刷题记录第八十天-修剪二叉搜索树。
文章浏览阅读248次。关于 dcm4che WADO WADO:Web Access to DICOM Objects dcm4che 是一个为医疗保健企业的开源应用程序和工具集合。这些应用程序已经开发了Java编程语言的性能和便携性,在JDK 1.6及更高版本支持部署。在dcm4che项目的核心是一个强大的执行DICOM标准的。该dcm4che-1.x和dcm4che-2.X DICOM Tool..._dcm4che实现wado服务
文章浏览阅读2.2k次。zookeeper服务器会产生三类日志:事务日志、快照日志和log4j日志。在zookeeper默认配置文件zoo.cfg(可以修改文件名)中有一个配置项dataDir,该配置项用于配置zookeeper快照日志和事务日志的存储地址。在官方提供的默认参考配置文件zoo_sample.cfg中,只有dataDir配置项。其实在实际应用中,还可以为事务日志专门配置存储地址,配置项名称为dataLogD..._linux查看zookeeper日志