基礎(chǔ)環(huán)境

程序

Nodejs 12.16.3
Npm 6.14.4
Yarn 1.22.0

組件

umi: "3.2.1"
react: "16.8.6"
antd: "4.2.0"
@ant-design/pro-layout: "5.0.8"
@ant-design/pro-table: "2.2.7"

nodejs的安裝教程到處都有，這里就不再?gòu)?fù)述了。由于umi和antd發(fā)展很快，接口也不兼容，因此本示例僅針對(duì)當(dāng)前版本有效，升級(jí)后有可能無(wú)法運(yùn)行。

配置文件

本示例采用Typescript開(kāi)發(fā)，因此需要配置tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./src/.umi/*"]
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "src/.umi/*",
    "webpack",
    "jest"
  ]
}

其它eslint相關(guān)文件不再舉例，可直接參考示例項(xiàng)目源碼。

目錄結(jié)構(gòu)

• config

umi約定存放配置文件的目錄，最重要的就是路由表，這里的路由表不僅控制路由，而且還控制了左側(cè)導(dǎo)航菜單的生成、頁(yè)面布局、權(quán)限控制等等，具體可參考umi文檔。

  routes: [
    {
      path: "/user",
      component: "../layouts/UserLayout",
      routes: [
        {
          name: "login",
          path: "/user/login",
          component: "./user/login",
        },
      ],
    },
    {
      path: "/",
      component: "../layouts/SecurityLayout",
      routes: [
        {
          path: "/",
          component: "../layouts/BasicLayout",
          authority: ["admin", "user"],
          routes: [
            {
              path: "/",
              redirect: "/welcome",
            },
            {
              path: "/welcome",
              name: "welcome",
              icon: "smile",
              component: "./Welcome",
            },
           ...
          ],
        },
        {
          component: "./404",
        },
      ],
    },
    {
      component: "./404",
    },
  ],

• mock

umi約定存放模擬服務(wù)的目錄，該目錄下的文件都會(huì)被自動(dòng)mock，從而實(shí)現(xiàn)前后端分離開(kāi)發(fā)。

function getRule(req: Request, res: Response, u: string) {
   ...
}
function postRule(req: Request, res: Response, u: string) {
   ...
}
export default {
  "GET /api/rule": getRule,
  "POST /api/rule": postRule,
};

• public

存放靜態(tài)資源文件，自動(dòng)映射到根目錄，可直接在less文件中引用。

• tests

單元測(cè)試工具代碼，不需要修改。真正的單元測(cè)試用例放在src/e2e目錄下。

• src/components

全局組件，通常全項(xiàng)目通用的組件放在這個(gè)目錄下，而某個(gè)頁(yè)面內(nèi)使用的組件放在頁(yè)面自己目錄下的components目錄，但這個(gè)并不會(huì)真正限制組件的使用范圍。

• src/e2e

單元測(cè)試用例，執(zhí)行yarn test會(huì)執(zhí)行該目錄下的測(cè)試用例。

• src/layouts

頁(yè)面布局代碼，同樣的，這也只是一個(gè)約定，并不會(huì)有強(qiáng)制作用。

• src/locales

國(guó)際化代碼，可以在之前的config中設(shè)置缺省語(yǔ)言，這里就會(huì)調(diào)用對(duì)應(yīng)的ts文件。

• src/models

符合redux規(guī)范的模型定義，這里使用了dva來(lái)進(jìn)行簡(jiǎn)化開(kāi)發(fā)，因此只需要定義state、effects和reducers三個(gè)部分就可以了，其它工作框架都幫你完成了。

• src/services

存放request訪問(wèn)代碼，這里使用了umi-request來(lái)簡(jiǎn)化request，并在utils中定義了一個(gè)具有統(tǒng)一錯(cuò)誤處理的封裝函數(shù)。

• src/pages

按頁(yè)面存放代碼的目錄，每個(gè)頁(yè)面目錄下又都可以有自己的components、locales和models、services。

添加頁(yè)面

首先在src/pages目錄下創(chuàng)建一個(gè)頁(yè)面目錄，這個(gè)目錄下至少包含一個(gè)index.tsx文件，通常還會(huì)包含styles.less。

一個(gè)最簡(jiǎn)單的index.tsx

export default (): React.ReactNode => (
  <PageHeaderWrapper>
    <Card>
      <div>
        <InfoCircleOutlined /> Hello World!
      </div>
    </Card>
  </PageHeaderWrapper>
);

其中PageHeaderWrapper是pro-layout布局中的一個(gè)包裹節(jié)點(diǎn)，用于包裹客戶區(qū)，并生成面包屑導(dǎo)航之類的公共組件，具體可參考ProLayout文檔。

然后在config中修改配置，在routes中增加頁(yè)面和組件的對(duì)應(yīng)關(guān)系，具體可參考umi文檔。

同時(shí)需要修改locales文件，添加相應(yīng)的文字信息，保存后頁(yè)面會(huì)自動(dòng)刷新。

其它

項(xiàng)目源碼已上傳碼云：demo.antdpro.starter