antd pro + umi4 + tailwindcss

antd pro + umi4 + tailwindcss 开发总结

项目初始化

• 如果不需要全球化可以使用 npm run i18n-remove ，formatMessage({id:somevar}) 这种动态的代码可能无法分析并删除，有些得手动删除。

• 在 src/models 目录下新建文件，文件名会成为 model 的 namespace. 允许使用 ts, js, tsx(推荐), jsx(不推荐) 四种后缀。useModel(‘文件名’)的数据可全局使用

  src/models/demo.ts

  export default () => {
    const [data, setData] = useState('hello')
    return {
      data,
      setData
    }
  }

• 可以在预览界面中拷贝设置覆盖到 config\defaultSettings.ts 中来修改配置。

• config/proxy.ts中配置代理

• 引入tailwindcss

  config/config.ts

  export default defineConfig({
    ..... // 其他配置
    extraPostCSSPlugins: [require('tailwindcss')], // 引入tailwindcss
  });

  src/global.less 最上面

  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';

  与src平级添加 tailwind.config.js

  module.exports = {
    content: [
      './src/**/*.html',
      './src/**/*.tsx',
      './src/**/*.jsx',
    ],
  }

数据初始化 ( 全局可用initialState )

src/app.tsx

type Menu = {
  component?: string;
  icon?: string;
  name?: string;
  path?: string;
};
export async function getInitialState(): Promise<{
  settings?: any;
  menuData?: Menu[];
  userInfo?: any,
}> {
  let data: Data = {};
  let menu: any = []
  const {location} = history
  console.log('pathname', location.pathname)
    try {
      await 调用接口初始化数据，
    } catch (error) {}
  return {
    settings: defaultSettings as Partial<LayoutSettings>,
    menuData: menu,
    userInfo: data?.examUser,
  };
}

动态表单、自定义渲染菜单

src/app.tsx

export const layout: any = ({ initialState, setInitialState }) => {
  const { location } = history;
  const { pathname } = location;
  return {
    // 动态菜单
     menu: {
      params: {
        menuData: initialState?.menuData
      },
      request: async (params: any, defaultMenuData: any) => {
        // 这里可以调接口, params变化调用request
        
        return 需要配置的菜单 // 和defaultMenuData数据类型一样
      },
    },
    // 自定义渲染菜单
    menuItemRender: (itemProps) => {
      return (
        <div
          className="flex"
          onClick={() => {
            history.push(itemProps.path);
          }}
        >
          <Space>
            {itemProps?.icon && (
              <img style={{ width: 16, height: 16 }} src={itemProps?.icon} alt="" />
            )}
            <div>{itemProps.name}</div>
          </Space>
        </div>
      );
    },
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    // 增加一个 loading 的状态
    childrenRender: (children) => {
      // if (true) return <PageLoading />;
      return (
        <>
          {children}
          {/* <SettingDrawer
            disableUrlParams
            enableDarkTheme
            settings={initialState?.settings}
            onSettingChange={(settings) => {
              setInitialState((preInitialState) => ({
                ...preInitialState,
                settings,
              }));
            }}
          /> */}
        </>
      );
    },
    ...initialState?.settings,
  };
};

动态路由 ( 如果不需要动态生成路由，在config/routes.ts里面配置即可，不需要加下面的函数了 。)

src/app.tsx

import React from 'react';
export function patchClientRoutes({ routes }) {
  // 如果想把内容放在菜单里面
  routes.map((res) => {
    if(res.path === '/') {
     path: '/foo',
     element: React.createElement(require('@/pages/OldPage').default), // 路径自己定
    }
  })
  // 如果不想把内容放在菜单里面
  routes.push(
    path: '/foo',
    element: React.createElement(require('@/pages/OldPage').default), // 路径自己定
  )
}

部署相关配置

config/config.ts

export default defineConfig({
  publicPath:  process.env.NODE_ENV === 'production' ? './' : '/' , // 配置相对路径
  hash: true, // build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
  history: {
    type: 'hash' // 开启hash路由模式
  },
  ..... // 其他配置
});