跳到主要内容

创建一个微前端应用

开始之前​

通过本教程可以了解应用开发大致流程，帮助开发者快速上手，开发出具有理想功能的应用。

本文将通过实现一个表格页面，来展示开发必备的流程和步骤。

开始之前，请确保本地已安装以下环境：

  • Node.js>=16.14.0
  • yarn
  • docker（本地调试使用）

第一步：创建应用​

  1. 安装/更新 @giteeteam/apps-cli
npm install -g @giteeteam/apps-cli
npm update -g @giteeteam/apps-cli
  1. 利用 cli，初始化应用
giteeteam-apps init

  1. 按照指令输入应用名称以及唯一 app_key

  2. 创建完成，主要目录结构如下：

apps_demo:
.
├── README.md # 插件说明文档
├── functions # 开发function的位置
├── manifest.yml # 插件描述文件
├── public 
├── src # 开发页面样式的位置
├── tsconfig.json
├── typings.d.ts
├── webpack.config.js
├── package.json
└── yarn.lock

第二步：开发应用功能​

1. manifest.yml​

  • Manifest 描述应用的配置信息，同时也是串联各个功能模块的导航。详见 manifest。
    • app：定义应用基础信息，定义应用版本
    • modules：定义包含应用逻辑的函数，以及应用使用的不同模块。
      • adminPage：将在系统设置侧边栏的底部添加一个菜单项，点击后进入开发的应用页面，具体详见 Admin Page
        • key：页面的唯一 ID
        • resource：指定该页面的打包文件
        • title：发布后链接到页面的菜单名称
        • loadType：应用的渲染方法
    • resource：页面用到的资源文件
app:
  name: appsDemo
  key: appsDemo
  version: '0.0.1'
modules:
  adminPage:
    - key: micro-adminPage
      resource: myPage
      title: myPage
      loadType: Micro
resources:
  - key: myPage
    path: ./dist/

2. 功能开发​

  1. 编辑 Demo.tsx 文件，引入开发表格所需组件
── src
│   ├── App.tsx
│   ├── hooks
│   ├── index.global.less
│   ├── index.tsx
│   ├── lib
│   ├── pages
│   ├── routes
│   └── statics
./src/pages/Demo.tsx
import React from 'react';
import { Table } from 'antd';
import cx from './Demo.less';

const Demo: React.FC = () => {
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      width: '40%',
      ellipsis: true,
    },
    {
      title: 'Operation',
      dataIndex: 'operation',
      key: 'operation',
      width: '40%',
      ellipsis: true,
    },
  ];

  return (
    <div>
      <h2 className={cx('title')}>Item Operation Logs</h2>
      <a></a>
      <Table
        rowKey="ID"
        columns={columns}
        dataSource={[
          { id: '1', operation: 'created' },
          { id: '2', operation: 'deleted' },
        ]}
      />
    </div>
  );
};

export default Demo;
提示

相关组件需要使用封装好的 antd 组件，其他组件详见自定义 UI。

第三步：打包，发布到线上开发环境​

1. 登陆调试环境​

使用登录命令（详细参数请参考：Login），登录到调试环境。

giteeteam-apps login

2. 构建应用​

构建完成后输出的制品格式是 *.zip

yarn build-app

build-app 命令在 package.json 中已经定义

3. 发布应用（开发环境）​

将上一步构建的应用包发布。（详细参数请参考：Deploy）

giteeteam-apps deploy xxx.zip

4. 在开发者中心中为租户订阅该应用​

http://demo.com/apps/page/application/developer

developer_page

developer_subscription

第四步：本地调试​

  1. 使用命令来本地启动前端项目
yarn dev

dev 命令在 package.json 中已经定义

  1. 使用 tunnel 命令（详细参数请参考：Tunnel）开启本地调试
giteeteam-apps tunnel
  1. 本地页面调试

登陆调试环境，在 LocalStorage 中添加APPS_ENABLE_LOCAL_DEV=true，进入到对应扩展点页面，即可进行调试

fontend_debug

第五步：线上部署​

  1. 打开应用市场

apps_market

  1. 创建应用，上传应用 zip

upload_app

  1. 点击"订阅"

subscribe_app

  1. 进入系统设置，可以看到左侧系统菜单栏出现本应用的页面

admin_page