umi登录搭建

umi登录搭建

1、 先找个地方建个空目录。mkdir myapp && cd myapp 2、查看下yarn：yarn -v 通过官方工具创建项目， yarn create @umijs/umi-app 3、安装依赖 yarn 4、删除 .umirc.ts，在根目录下，新建一个config文件夹 4.1、在config文件夹下，建一个config.ts文件，

import { defineConfig } from 'umi';
import defaultSettings from './defaultSettings';

import routes from './routes';

export default defineConfig({
  routes: routes,
  hash: true,
  antd: {},
  dva: {
    hmr: true,
  },
  layout: {
    name: defaultSettings.title,
    locale: false,
    siderWidth: 208,
    ...defaultSettings,
  },
})

4.2、在config文件夹下，建一个routes.ts文件，

export default [
    { 
	path: '/login', 
	component: './Login',
    },
    {
	path: '/home',
	name: '首页',
	component: './Home'
    },
    {
	path: '/charts',
	name: '图表',
	routes: [
          {
            path: '/charts/line',
            name: '折线图',
            component: './Charts/Line/',
          },
          {
            path: '/charts/pie',
            name: '饼图',
            component: './Charts/Pie/',
          },
        ],
    },
    {
	path: '/',
	redirect: '/home'
    }
]

4.2、在config文件夹下，建一个defaultsetting.ts文件，

import { Settings as LayoutSettings } from '@ant-design/pro-layout';

const Settings: LayoutSettings & {
  pwa?: boolean;
  // cookie保存的天数
  cookieExpires?: number;
  // 凭证cookie关键字
  tokenKey?: string;
  // 展示底部版权声明
  showFooter?: boolean;
} = {
  navTheme: 'dark',
  primaryColor: '#4165E8',
  layout: 'mix',
  splitMenus: true,
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: '测试测试',
  pwa: false,
  iconfontUrl: '',
  cookieExpires: 1,
  tokenKey: 'entry_token', // 
  showFooter: false,
};

export default Settings;

umi搭建，为什么不是？create-react-app create-react-app 是基于 webpack 的打包层方案，包含 build、dev、lint 等，他在打包层把体验做到了极致，但是不包含路由，不是框架，也不支持配置。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难

umi可用的地方 / 场景： 需要选择不同的路由方案