小知识,大挑战!本文正在参与“ 程序员必备小知识 ”创作活动
umi 的 “约定”
umi的使用过程中有很多地方写着 约定 。
对于这个 约定 的意思我的理解是,是umi本身有了这些功能,但是项目初始化的时候没有生成,在需要的时候,写出来就能用。实现一个可随时插拔的组件功能。
首先看 通过umi 生成的文件目录结构
.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
├── .umi
├── pages
├── index.less
└── index.tsx
这是初始的目录结构,假如要写模板文件,可以直接在src 目录下新建 layouts 文件夹 并建立 index.tsx 文件。项目就可直接使用模板文件(在routes中配置好模板与路径)
umi中的配置config
项目配置不复杂的情况下,可以直接在根目录下的 .umirc.ts 文件中写 比较复杂的情况下,可以根目录下 创建 config 文件夹 并建立 config.ts,用以写配置文件。 配置项比较多,具体可以产看umi 文档 常用的
- title 配置标题
开启后,网站title 会根据 配置的内容 产生变化
当然也可以 通过路由 来配置相应的标题
- outputPath 指定输出路径
开启后可以指定 文件打包的目录文件名
默认为 dist 开启后,打包到 builds文件夹中
- theme 配置主题颜色等
开启后会根据配置的内容改变主题颜色等 可以在 ant desgin 中配置具体参数
export default {
title: 'hello-world', // 配置项目标题
outputPath:'builds', //配置输出后的路径,
//配置主题
theme: {
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影
}
}