[email protected][email protected] build background projects from scratch

preface

Umi and ANTD have been upgrading for some time and have been planning to create a new project with this plug-in development suite to experience the benefits of this framework. After the umi was upgraded, the documentation was slightly less friendly to novices (such as me). In the process of building a new infrastructure, I also encountered a lot of problems, record the solution process, like everyone to share!

start

First of all umi’s documents here, can refer to this quick start to build, I also refer to this to build, simple steps.

• You need to have Node first, and make sure node is 10.13 or above. (On a MAC, NVM is recommended to manage node versions.)

$ node -v

v10.13.0

Copy the code

• Scaffolding an initial project directory and find a place to create a new folder for your code

mkdir test_umi && cd test_umi

Copy the code

Run yarn create @umijs/umi-app to create a project using an official tool. If the project succeeds, the following project directory code is displayed

$ yarn create @umijs/umi-app

# or NPX @ umijs/create - umi - app

Copy:  .editorconfig

Write: .gitignore

Copy:  .prettierignore

Copy:  .prettierrc

Write: .umirc.ts

Copy:  mock/.gitkeep

Write: package.json

Copy:  README.md

Copy:  src/pages/index.less

Copy:  src/pages/index.tsx

Copy:  tsconfig.json

Copy:  typings.d.ts

Copy the code

• Install NPM dependencies

$ yarn

Yarn install v1.21.1

[a quarter] 🔍 Resolving packages...

success Already up-to-date.

✨  Done in0.71 s.

Copy the code

• Start the project

$ yarn start

Starting the development server...

✔ Webpack

  Compiled successfully in17.84 s

 DONE  Compiled successfully in 17842ms                                       8:06:31 PM

  App running at:

  - Local:   http://localhost:8000 (copied to clipboard)

  - Network: http://192.168.12.34:8000

Copy the code

Open http://localhost:8000/ in your browser and you’ll see the interface if you don’t have to

Modify the configuration and add required plug-ins

layout

The default scaffolding has @umijs/preset- React built in, including common functions such as layout, permissions, internationalization, DVA, simple data flow, etc. For example, if you want an Ant-design-Pro layout, edit.umirc.ts to configure Layout: {} and install @ant-Design/Pro-Layout. Pay particular attention to the installation of this dependency package, without which the layout of ANTD-Pro will not display correctly. There was no such hint in the official document before, but I found it when I stepped on the pit later, so it was added to the document.

import { defineConfig } from 'umi'

export default defineConfig({

  // Config enable layout plug-in

+ layout: {},

  routes: [{ path: '/'.component: '@/pages/index'}].

})

Copy the code

Layout configuration please refer to the document here mainly said I stepped on the pit:

1. When using this layout, I need to display the user name and avatar at the top right, but the documentation doesn’t say how to change the default avatar. As stated on the official website, runtime configuration is required to use the login button and username

// src/app.js

export const layout = {

  logout: (a)= > {}, // do something

  rightRender: initInfo= > {

    return 'hahah'

  }, // return string || ReactNode;

}

Copy the code

If rightRender is configured, the user name and exit logic need to be customized. I don’t need to customize the interaction here, I just want to change the name and avatar, so it’s not appropriate to change this rightRender method, because by default there’s no exit button on the top right, An object must be returned by @umijs/plugin-intial-state getInitialState in the runtime configuration to display it. Install @umijs/plugin-intial-state

Initialize data globally

• The concept defines a place in the global to initialize data for use anywhere in the global. Installing a plug-in@umijs/plugin-intial-state
• To enable thesrc/app.tsAnd exportgetInitialStateMethod. Runtime configuration is required
• Dependencies cannot be used directly, they must be combined@umijs/plugin-modelUse together.
• configuration

// src/app.ts

export async function getInitialState() {

  const data = {

    userId: '1'.

    role: 'admin'.

    name: 'the wind'.// This is where the default user name is configured in the layout

    avatar: 'http://a.b.com/18-4-12/31903640.jpg'.// This is where the default user avatar is configured in the layout

  }

  return data

}

// Configure the logout function in the upper right

export const layout = {

  logout: (a)= > {

    console.log('1234')

  },

}

Copy the code

• Plug-ins are required to get global shared data@umijs/plugin-modelThis plug-in retrieves data that exists in a global share, not in a DVA data stream. Special attention should be paid to the simple use mode

const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState')

Copy the code

Interface request

The plugin @umijs/plugin-request is enabled by default.

Examples of use:

import { request } from 'umi'

request(url, {

  method: 'POST'.

  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

  requestType: 'form'.

  data,

})

Copy the code

Please refer to the documentation for more usage methods

Access to [email protected]

The enable mode is Configuration Enable

import { defineConfig } from 'umi'

export default defineConfig({

  // Config enable layout plug-in

+ layout: {},

+ antd: {},

  routes: [{ path: '/'.component: '@/pages/index'}].

})

Copy the code

There is a note that [email protected] icon library separate out, when using to install the specific details of the document

Use DVA data streams

The plugin is @umijs/plugin-dva, which is enabled by configuration

import { defineConfig } from 'umi'

export default defineConfig({

  // Config enable layout plug-in

+ layout: {},

+ antd: {},

+ dva: {

    immer: true.

    hmr: false.

  },

  routes: [{ path: '/'.component: '@/pages/index'}].

})

Copy the code

For details, see the documentation

Use a proxy for cross-domain requests

Add the configuration

import { defineConfig } from 'umi'

export default defineConfig({

  // Config enable layout plug-in

+ layout: {},

+ antd: {},

+ dva: {

    immer: true.

    hmr: false.

  },

+ proxy: {

    '/api': {

      target: 'https://a.b.com/'.

      changeOrigin: true.

      pathRewrite: { '^/api': ' ' },

    },

  },

  routes: [{ path: '/'.component: '@/pages/index'}].

})

Copy the code

Open micro front end

This plugin is used for configuration development and needs to be installed:

yarn add @umijs/plugin-qiankun -D

Copy the code

Open the configuration

import { defineConfig } from 'umi'

export default defineConfig({

  // Config enable layout plug-in

+ layout: {},

+ antd: {},

+ dva: {

    immer: true.

    hmr: false.

  },

+ proxy: {

    '/api': {

      target: 'https://a.b.com/'.

      changeOrigin: true.

      pathRewrite: { '^/api': ' ' },

    },

  },

+ qiankun:{

    master: {

      // Register sub-application information

      apps: [

        {

          name: 'app1'./ / the only id

          entry: 'http://localhost:8001'.// html entry

        },

].

    },

  },

  routes: [

      { path: '/'.component: '@/pages/index' },

    + { path: '/dashboard/analysis'.microApp: 'app1' } // Subpage routing for the micro front end

].

})

Copy the code

See more configurations to useThe document