UmiJS初探(三)

328 阅读2分钟

小知识,大挑战!本文正在参与“   程序员必备小知识   ”创作活动

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); // 浮层阴影
  }

}