proyecto de inicialización de umi

andamio

Este curso elige utilizar umi como herramienta de compilación. De hecho, umi no es solo una herramienta de compilación, sino también un marco de interfaz de usuario. Encapsula el paquete web , el enrutador de reacción , etc. de la comunidad , lo que nos permite construir rápidamente un proyecto de React basado en él.
Código relacionado: ** react-antd-admin: desarrollo de proyectos de back-end y middle-end basado en react+ant-design-pro. Para aprender. **¿
Informes de errores?
Con respecto a los comentarios recientes (2021/07/13), informes de errores cuando descargando el inicio del proyecto:

Dado que la actualización de umi no tiene un buen control de versiones, problema relacionado: enlace
Método de emergencia temporal:

En cuanto a por qué, espere la actualización oficial.

Construir proyecto de inicialización

instalación de tiran

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

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

Utilice tyarncrear umipara crear un andamio de reacción de acuerdo con las indicaciones de umi.

tyarn create umi

Elija según sus propias necesidades. Se recomienda elegir la versión mecanografiada aquí para facilitar la correspondencia con los siguientes tutoriales.
Durante la etapa de desarrollo, elija la versión simple para instalar. Esta plantilla solo contiene el diseño de fondo básico de ant-design-pro, Sobre esta base, lo cual es conveniente para el desarrollo secundario
. La versión * completa* se puede consultar en la experiencia en línea .

Estructura de directorios

Las dependencias de la versión se pueden ver en package.json . Pages es el archivo de entrada, similar a la carpeta de vistas en vue-element-admin ; models es el código relacionado con Dva, similar al almacén en vue-element-admin, que almacena la administración del estado. archivos; Servicios es la encapsulación de la interfaz de solicitud de red en el proyecto de reacción, aquí se usa fetch ; config es el código de clase de configuración del proyecto, que es diferente de la estructura vue-element-admin . Configuración relacionada con el enrutamiento, configuración predeterminada del proyecto relacionada con el proxy La configuración y otros archivos se almacenan aquí.

Instalar dependencias/iniciar

tyarn  或 cnpm  install
npm  start

página delantera

Luego de iniciar el proyecto y acceder al mismo http://localhost:8000 , la página será redirigida a * Bienvenido.*
El proyecto muestra dos menús de navegación por defecto: 1. Bienvenida 2. Formulario de consulta

diseño básico

Crear componente helloWorld

Crear página

Hemos construido el esqueleto básico del proyecto basado en ant design pro . Basado en la base original, intentamos agregar una nueva página. Debido a que el proyecto usa mecanografiado , nuestra nueva página es: src/pages/HelloWorld/index.tsx
Crear componentes de reacción puede usar componentes y funciones de clase Establecimiento (recomendado), aquí usamos el establecimiento de funciones **. HelloWorld: React.FC Es la sintaxis [ typeScript**] ( TypeScript: Handbook - Basic Types ), y los dos puntos son el tipo de variable.

Suplemento: typeScript es un superconjunto de javascript. Es totalmente compatible con la sintaxis de JavaScript. El sufijo del archivo es ts . El componente jsx creado aquí es el componente jsx de react y el sufijo es tsx . TypeScript es desarrollado por MicroSoft y eventualmente compilado en JavaScript para su ejecución.
Las características son: tipo forzado, mejora de la inferencia de tipos, mejora el salto de sintaxis del editor IDE y otras funciones, avisos de error, etc., y tiene los conceptos de clases, genéricos, interfaces, enumeraciones, herencia y otros conceptos. que tienen los lenguajes orientados a objetos como Java.

No explicaremos demasiado sobre TypeScript aquí , pero gradualmente llevaremos a todos a comprender y familiarizarse con esta sintaxis en la implementación de codificación posterior.

// 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;

Configurar enrutamiento

El proyecto se construye usando umi. Hay restricciones específicas en el enrutamiento en umi: documento .
Encuentre el archivo config/route.ts . La estructura de configuración de enrutamiento de este archivo es exactamente la misma que la de vue-element-admin. Podemos entender fácilmente cómo agregarlo. basado en la ruta existente Nueva configuración de ruta.

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',
  },
];

Configurar la navegación

Descubrimos que después de agregar la ruta, naturalmente habrá una navegación adicional llamada el valor de route.name, a la que se puede acceder directamente. Esto es tan inteligente como vue-elemnet-admin, es decir, el menú de navegación en la izquierda se basa automáticamente config/routes.ts en Generado.

globalización

Descubrimos que aunque el acceso a la página era normal, la consola mostraba un error. No se pudo encontrar la configuración de internacionalización de menu.hello-world . Esto significa que la configuración de enrutamiento admite la internacionalización de forma predeterminada y necesitamos encontrar los archivos de configuración relevantes. para configurar el dialecto . Busque la carpeta de archivos src/locals , podemos ver muchas carpetas de internacionalización a continuación. Busque zh-CN la carpeta y encontrará que hay varios archivos de configuración que deben internacionalizarse. Abrimos src/locals/zh-CN/menu.ts y agregamos 'menu.hello-world': '世界俺来了',

La página se actualiza automáticamente y el error desaparece.

Resumir

Se implementó e integró un componente simple de HelloWorld en el marco de Ant Desig Pro. Hemos hecho lo siguiente:

Crear el archivo HelloWorld/index.tsx
Rutas agregadas en config/routes.ts
Se agregó mapeo de internacionalización en src/locals/zh-CN/menu.ts