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

先赞后看，养成习惯！！

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

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

安装

第一步

1.环境安装

新建个文件夹，准备安装

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也行

这两个可以选择性安装

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的对应语句注释掉就行，

后面要用了，可根据不同的角色，展示不同的菜单内容。

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