umi初期化プロジェクト

足場

このコースでは、コンパイルツールとしてumiを使用することを選択します。実際、umi はコンパイルツールであるだけでなく、フロントエンドフレームワークでもあります。これはコミュニティの webpack、react-routerなどをカプセル化し、それに基づいて React プロジェクトを迅速に構築できるようにします。
関連コード: ** react-antd-admin: React+ant-design-pro をベースにしたミドルおよびバックエンドのプロジェクト開発。学習用 **エラー
報告?
最近のフィードバック (2021/07/13) について、エラー報告時プロジェクトのスタートアップをダウンロードしています:

umi アップデートには適切なバージョン管理がないため、関連する問題: リンク
一時的な緊急方法:

その理由については、公式アップデートをお待ちください。

ビルド初期化プロジェクト

タイーンのインストール

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

tyarncreateを使用してumi、umi プロンプトに従って反応足場を作成します。

tyarn create umi

自分のニーズに応じて選択してください。次のチュートリアルとの対応を容易にするために、ここでは typescript
バージョンを選択することをお勧めします。開発段階では、インストールするシンプル バージョンを選択してください。このテンプレートには、基本的な ant-design-pro 背景レイアウトのみが含まれています。これは、これをベースにした二次開発に便利で
、*完全*バージョンはオンラインエクスペリエンスで参照できます。

ディレクトリ構造

バージョンの依存関係は、 package.jsonで確認できます。 Pages は、 vue-element-adminの views フォルダーに似たエントリファイルです。 models は、状態管理を保存する vue-element-admin のストアに似た、Dva 関連のコードです。ファイル; Servicesは反応プロジェクトのネットワークリクエストインターフェイスのカプセル化であり、ここではfetch が使用されます ; config はプロジェクト設定クラスコードであり、 vue-element-admin 構造とは異なります ルーティング関連の設定、プロキシ関連の設定プロジェクトのデフォルト設定ファイルやその他のファイルはここに保存されます。

依存関係のインストール/開始

tyarn  或 cnpm  install
npm  start

表紙

プロジェクトを開始してアクセスすると http://localhost:8000 、ページは *ようこそ * にリダイレクトされます。
プロジェクトにはデフォルトで 2 つのナビゲーションメニューが表示されます: 1. ようこそ 2. クエリフォーム

基本レイアウト

helloWorld コンポーネントを作成する

ページを作成

ant design proに基づいてプロジェクトの基本骨格を構築しました。元のベースに基づいて、新しいページを追加してみます。プロジェクトは typescriptを使用しているため、新しいページは次のとおりです: 反応コンポーネントの作成はクラスコンポーネント と関数src/pages/HelloWorld/index.tsx
を使用できます。 (推奨)、ここでは 関数設立**が使用されており、 [ typeScript**]( TypeScript: Handbook - Basic Types ) 構文 であり、コロンは変数の型です。HelloWorld: React.FC

補足: typeScript は JavaScript のスーパーセットです。JavaScript 構文と完全に互換性があります。ファイルのサフィックスは tsです。ここで作成した jsx コンポーネントは、react の jsx コンポーネントで、サフィックスは tsxです。TypeScript は MicroSoft によって開発され、最終的には機能は次のとおり
です: 強制型、型推論の強化、エディタ IDE の構文プロンプトジャンプやその他の機能、エラープロンプトなどの強化、クラス、ジェネリック、インターフェイス、列挙、継承などの概念があります。 Javaなどのオブジェクト指向言語が持つもの。

ここでは typeScriptについてはあまり説明しませんが、後続のコーディング実装で徐々に全員がこの構文を理解し、慣れ親しむようにしていきます。

// 1. 引入React
import React from 'react';

// 这里采用 函数组建 形式创建 HelloWorld 组建
// #https://react.docschina.org/docs/components-and-props.html
// 2. 创建类型为: React.FunctionComponent 变量,并返回一个 ReactDom对象
const HelloWorld: React.FC = ()=> 
  (
    <div>hello,world!</div>
  )

// 3. 导出默认组建
export default HelloWorld;

ルーティングの構成

プロジェクトは umi を使用して構築されています。 umi: documentにはルーティングに関する特定の制約があります。
ファイルを見つけます config/route.ts 。このファイルのルーティング構成構造は vue-element-admin のものとまったく同じです。追加方法は簡単に理解できます。既存のルーティングに基づく新しいルーティング構成。

export default [
  {
    path: '/',
    component: '../layouts/BlankLayout',
    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',
              },
              // 我们在这里添加 helloworld 的路由配置
              {
               path: '/hello-world', // 路由路径 和vue一致
                // name并非路由"别名", 这个和vue是不同的. 
                // 这里的name体现了sideBar的导航条目,由框架代码实现.
               name: 'hello-world',  
                // # https://ant.design/components/icon-cn/
               icon: 'smile',
                // 组建相对路径为 /pages
               component: './HelloWorld'
              }
              {
                path: '/admin',
                name: 'admin',
                icon: 'crown',
                component: './Admin',
                authority: ['admin'],
                routes: [
                  {
                    path: '/admin/sub-page',
                    name: 'sub-page',
                    icon: 'smile',
                    component: './Welcome',
                    authority: ['admin'],
                  },
                ],
              },
              {
                name: 'list.table-list',
                icon: 'table',
                path: '/list',
                component: './TableList',
              },
              {
                component: './404',
              },
            ],
          },
          {
            component: './404',
          },
        ],
      },
    ],
  },
  {
    component: './404',
  },
];

ナビゲーションを構成する

ルートを追加すると、当然、route.name の値という名前の追加のナビゲーションが追加され、直接アクセスできることがわかりました。これは、vue-elemnet-admin と同じくらいスマートです。つまり、上のナビゲーションメニューです。左側は config/routes.ts 生成されたものに基づいて自動的に作成されます。

グローバリゼーション

ページへのアクセスは正常でしたが、コンソールにエラーが表示されたことがわかりました。menu.hello-worldの国際化設定が見つかりませんでした。これは、ルーティング設定がデフォルトで国際化をサポートしており、関連する設定ファイルを見つける必要があることを意味します。方言を設定します。ファイルフォルダを見つけます src/locals 。下に多くの国際化フォルダが表示されます。 zh-CN フォルダを見つけて、国際化する必要があるさまざまな設定ファイルがあることがわかります。開いて追加します src/locals/zh-CN/menu.ts 。 'menu.hello-world': '世界俺来了',

ページが自動的に更新され、エラーが消えます。

要約する

シンプルな HelloWorld コンポーネントが実装され、ant desig pro フレームワークに統合されており、次のことを行いました。

HelloWorld/index.tsx ファイルを作成する
config/routes.ts にルートを追加しました
src/locals/zh-CN/menu.ts に国際化マッピングを追加しました

足場