项目初始化
-
如果不需要全球化可以使用 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路由模式
},
..... // 其他配置
});