UmiJS 소개

왜 우미?

프론트엔드 개발은 꽤 오랫동안 백엔드와 구별되었습니다. 프런트엔드 개발을 위해 많은 프레임워크와 플러그인이 개발되었습니다. 선택할 수 있는 도구가 너무 많아 프로젝트를 초기화하기 어려운 경우가 있습니다. 이를 이루기 위해 UmiJS이 살아났습니다.

무엇보다도 -

Umi(프런트엔드 프레임워크)를 사용하려면 NodeJS이 설치되어 있어야 합니다.

중국에 있는 경우 더 빠르고 안전한 패키지 관리를 위해 cnpm 또는 tyarn을 설치할 수 있습니다.

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# OR
$ npm i yarn tyarn -g

그런 다음 cnpm/tyarn를 사용하여 종속성을 설치할 수 있습니다.

Umi 초기화: 글로벌

전역적으로 umi를 설치할 수 있습니다.

$ tyarn global add umi
# OR
$ cnpm install umi -g

그런 다음 'umi generator'를 사용하여 일부 페이지를 빠르게 시작할 수 있습니다.

generator command

  $ umi g page index

이렇게 하면 먼저 현재 디렉토리 아래에 pages 파일과 index.js 파일이 자동으로 생성되는 index,css 폴더가 생성됩니다. js 디렉토리의 각 pages 파일은 경로로 해석됩니다. 일반적으로 이 명령은 프로젝트의 루트 디렉터리에서 실행됩니다.

우미 개발

  $ umi dev

그러면 포트 8000+에서 페이지 서비스가 시작됩니다.

Umi 초기화: 스캐폴드

프로젝트 폴더에서 umi 스캐폴드를 사용하여 umi 프로젝트를 초기화할 수도 있습니다.

1. 새로운 디렉토리 만들기

$ mkdir antd-testing
$ cd antd-testing

2. 우미 설치

$ tyarn create @umijs/umi-app

이제 프로젝트 구성에 따라 초기화 프로세스가 완료되었습니다.

3. 종속성 설치 및 시작

$ tyarn

그 다음에:

$ tyarn start

추신: 다음을 실행하여 pro-layout 을 설치하여 'Ant Design' 기본 레이아웃을 사용할 수 있습니다.

$ tyarn add @ant-design/pro-layout
# or
$ cnpm i @ant-design/pro-layout --save

그런 다음 .umirc.ts 파일을 편집합니다.

import { defineConfig } from 'umi'

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {}, // add this line
  routes: [{ path: '/', component: '@/pages/index' }],
})

스크립트 실행

이제 다음 명령을 실행하여 서버를 시작할 수 있습니다.

$ umi dev
# OR
$ cnpm run dev
# OR
$ tyarn start

라우팅

기존 라우팅(파일 라우팅) - 约定式路由

폴더 구조, 즉 src/pages 아래의 파일은 기본 라우팅을 나타냅니다.

Dynamic Routing : 규칙에 따라 [post]라는 이름의 폴더가 경로에서 변수가 됩니다/index/:post.

Nested Routing : 규칙에 따라 _layout.tsx가 pages 폴더의 하위 폴더에 있는 경우 _layout.tsx는 동일한 폴더

내 다른 모든 구성 요소의 상위 구성 요소가 됩니다.

Overall layout : 규칙에 따라 index.tsx 폴더에 있는 src/layouts 파일은 src/pages 폴더에 있는 모든 구성 요소의 상위 구성 요소입니다.

404 Routing : 규칙에 따라 404.tsx 폴더의 pages는 구성 요소가 404 페이지

를 렌더링합니다.

Extra Routing Attribute : 구성 요소를 내보내기 전에 이 행HomePage.title = 'Home Page'을 추가합니다. 이제 추가 라우팅 속성title에 액세스할 수 있습니다.

구성된 라우팅 - 配置式路由

이 라우팅 방법이 만족스럽지 않은 경우 경로를 직접 지정하도록 config/config.js/.umirc.ts 파일을 구성합니다(예: 기본 기존 라우팅(约定式路由)이 아닌 구성된 라우팅(配置式路由)).

export default {
  routes: [
    {
      exact: true,
      path: '/',
      component: '@pages/FirstPage', // relative path from `src` folder
      routes: [
        { path: '/list', component: 'List' },
        { path: '/listing', redirect: '/list' }, // redirecting to other routes
        { path: '/admin', component: 'Admin' },
      ],
    },
  ],
}

참고: @는 ./src를 나타냅니다. -- 상대 경로를 나타냅니다. ..에서와 같이 ../Firstpage와 동일합니다.

역사: 탐색

Umi에는 한 페이지에서 다른 페이지로 사용자를 안내하는 두 가지 방법이 있습니다: <Link to="/link_url">Somewhere</Link> component 및 history.push('/link_url'):

import { history } from 'umi'

// simply redirecting
history.push('/list')

// redirecting with variables
history.push('/list?a=b')
history.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
})

// go back
history.goBack()

짓다

$ cnpm run build

이 코드를 실행하여 dist 폴더를 빌드합니다. 전역적으로 serve를 설치하는 것을 잊지 마십시오.

$ cnpm install serve -g

그런 다음 포트 5000에서 직접 dist 폴더를 제공할 수 있습니다.

$ serve ./dist

플러그인

umi 프로젝트에서 플러그인 목록을 확인하려면:

$ umi plugin list

# showing the keys
$ umi plugin list --key

key 의 plugin 를 알게 되면 구성 파일에서 플러그인을 구성할 수 있습니다.

export default {
  mock: false,
  // OR
  mock: { exclude: ['./foo'] },
}

모의 데이터

모의 데이터는 /mock 폴더에 있습니다. tipical 모형api.ts 파일은 다음과 같습니다.

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },
  // GET 可忽略
  '/api/users/1': { id: 1 },
  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.end('ok')
  },
}

이제 /api/users를 방문하면 { users: [1, 2] }가 반환됩니다. GET 키워드를 생략할 수 있습니다.

Mock.js

mock.js를 사용하여 모형 데이터를 자동 생성할 수 있습니다. 자세한 내용은 웹사이트를 참조하세요.

환경 변수

다이나믹임포트