通过脚手架安装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也行

在浏览器打开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的对应语句注释掉就行,
后面要用了,可根据不同的角色,展示不同的菜单内容。

如果有帮助到你,点个赞吧!!!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

通过脚手架安装Ant+react+umi+dva项目(一)

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 通过脚手架安装Ant+react+umi+dva项目(一)
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏