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的对应语句注释掉就行，
后面要用了，可根据不同的角色，展示不同的菜单内容。
如果有帮助到你，点个赞吧！！！