使用脚手架创建React项目以及解决ant design pro v5开发过程中的相关问题

一、创建react项目

        版本号：

        create-react-app：4.0.3

        react： ^17.0.2

        react-dom:：^17.0.2

        react-scripts：4.0.3

1. 设置淘宝npm仓库，vs code打开指定目录，切换到控制台，执行：

   npm config set registry https://registry.npm.taobao.org

   这样的话就不需要下cnpm了。可以使用下面的命令查看设置是否生效：

   npm config get registry

2. 本地安装脚手架create-react-app：

   npm install create-react-app --save-dev;

3. 使用脚手架创建项目：

   ./node_modules/.bin/create-react-app test

4. 果你的node版本大于等于8.10切npm版本大于等于5.6，可以直接用下面的命令：

   npx create-react-app test

   如果要使用typescript，使用命令：

   npx create-react-app my-app --template typescript

5. 进入到项目目录：cd test，使用命令启动：

   npm run start

   至此，一个react前端测试项目就创建好了。

二、antd pro v5引用官方深色主题不生效。

        版本号：

        ant-design-pro：5.0.0

        umi: ^3.5.0

        官方链接：开始使用

        官方深色主题：GitHub - ant-design/ant-design-dark-theme: 🌚 Dark theme variables of Ant Design

        根据官方提供的创建项目方式，使用npx create-umi创建一个ant design pro v5项目，创建好的项目目录如下（由于官方的版本更新经常导致目录结构发生变化，所以你的项目可能不一定有config.js这个文件，但基本都会有一个配置文件的，一般都是在这个配置文件修改）：

使用命令：

npm install --dev-save

下载依赖，依赖下载好之后，再使用命令：

npm install @ant-design/dark-theme --dev-save

下载深色主题，打开config/config.js，引入该主题：

import darkTheme from '@ant-design/dark-theme';

同时将该文件原本的

  theme: {
    'primary-color': defaultSettings.primaryColor,
  },

改成：

  theme: {
    // 'primary-color': defaultSettings.primaryColor,
    ...darkTheme,
  },

此时，使用npm run start启动项目后，深色主题是有些问题的，footer和header部分还是白色的，文本框也是原来的主题的，就像下面这样：

 出现这个问题是因为官方脚手架创建的项目使用了MFSU打包导致的打包错误，这个插件目前还很不成熟，所以建议先不要用它，关掉它的方法很简答，在config/config.js里面，把下面这一句去掉：

mfsu: {},

这样，再重新启动项目，黑色主题就没问题了：

三、在ant design pro v5版本里面进行权限控制和修改默认的403页面

ant design pro v5的403页面是在umi里面内置的，因此项目里面找不到相关的信息，如果想重写，找到app.tsx文件，在layout这个类里面添加属性：

 unAccessible: <Result
      status="403"
      title="403"
      subTitle="Sorry, you are not authorized to access this page."
      extra={<Button type="primary">sdfasdfsdf</Button>}
/>,

其中Result和Button是来自antd的组件。如下图：

另外权限相关的操作，ant design pro v5也是硬编码实现的，需要在access.ts文件里面进行配置，access.ts这个文件位于src根目录下，文件名是固定的，其配置内容如下：

export default function access(initialState: 
{ currentUser?: API.CurrentUser | undefined }) 
{
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
  };
}

这里的其他信息都不需要动，如果要配置权限，只需要想canAdmin那样配置就可以了，然后在路由里面的access属性上加上该配置，如下：

  {
    name:'docs',
    path: '/docs',
    icon: 'smile',
    component: './Docs',
    access: 'canAdmin'
  },

上面的意思是说，/docs这个路由，用户的access权限属性必须等于admin，否则，将不能访问

详细信息可参考官方文档：https://pro.ant.design/zh-cn/docs/authority-management/