通过脚手架安装Ant+react+umi+dva项目（一）

先赞后看，养成习惯！！

写了这么多react的学习笔记，结果忘记发最关键的如何新建项目这步，失误失误

我争取把我当前的环境重现出来吧

安装

第一步

1.环境安装

首先得有node

然后推荐使用 yarn 管理 npm 依赖

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

新建个文件夹，准备安装

mkdir myantdproapp && cd myantdproapp

yarn create umi （tyarn create umi 也行） 或 npm create umi

C:\myantdproapp>yarn create umi
yarn create v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@umijs/create-umi-app > @umijs/utils > @babel/register@7.10.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "create-umi > sylvanas > @umijs/fabric > @typescript-eslint/eslint-plugin@3.10.1" has unmet peer dependency "@typescript-eslint/parser@^3.0.0".
[4/4] Building fresh packages...
success Installed "create-umi@0.25.0" with binaries:
      - create-umi
? Select the boilerplate type ant-design-pro
? � Be the first to experience the new umi@3 ? Pro V4
? � Which language do you want to use? JavaScript
? � Do you need all the blocks or a simple scaffold? simple
? � Time to use better, faster and latest antd@4! antd@4
Cloning into 'C:\myantdproapp'...

2.安装依赖

yarn   // tyarn也行

3.开始运行

yarn start  // tyarn也行

在浏览器打开http://localhost:8000/welcome就可以看到新建的程序了

这两个可以选择性安装

yarn add @ant-design/pro-table

yarn add @ant-design/pro-layout

4.目录

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

5.路由

可以在config.js看到路由内容，这也是左侧菜单的路由内容

routes: [
    {
      path: '/user',
      component: '../layouts/UserLayout',
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: './user/login',
        },
      ],
    },
    {
      path: '/',
      component: '../layouts/SecurityLayout',
      routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/welcome',
            },
            {
              path: '/welcome',
              name: 'welcome',
              icon: 'smile',
              component: './Welcome',
            },
            {
              path: '/admin',
              name: 'admin',
              icon: 'crown',
              component: './Admin',
              authority: ['admin'],
              routes: [
                {
                  path: '/admin/sub-page',
                  name: 'sub-page',
                  icon: 'smile',
                  component: './Welcome',
                  authority: ['admin'],
                },
              ],
            },
            {
              name: 'list.table-list',
              icon: 'table',
              path: '/list',
              component: './ListTableList',
            },
            {
              component: './404',
            },
          ],
        },
        {
          component: './404',
        },
      ],
    },
    {
      component: './404',
    },
  ],

可能会疑惑为什么有这段，但是在菜单没有看到

{
   path: '/admin',
   name: 'admin',
   icon: 'crown',
   component: './Admin',
   authority: ['admin'],
   routes: [
     {
       path: '/admin/sub-page',
       name: 'sub-page',
       icon: 'smile',
       component: './Welcome',
       authority: ['admin'],
     },
   ],
 },

原因就在于这个路由有对应的权限才能看到

{
   path: '/admin',
   name: 'admin',
   icon: 'crown',
   component: './Admin',
  // authority: ['admin'],
   routes: [
     {
       path: '/admin/sub-page',
       name: 'sub-page',
       icon: 'smile',
       component: './Welcome',
      // authority: ['admin'],
     },
   ],
 },

只需将authority的对应语句注释掉就行，
后面要用了，可根据不同的角色，展示不同的菜单内容。

如果有帮助到你，点个赞吧！！！