本文介绍: package.json 文件相关配置版本,充分了解这些配置有助于我们提高开发效率src / locales/ zh-CN 文件夹全部预览一遍,找到menu.ts 文件然后你就看到导航栏有变化了,有个初步了解。就根据这种方法修改,慢慢深入理解。’menu.home‘: ‘首页‘, 在这个后面加一个,’menu.第三步,组件总览 – Ant Design快速看一遍。请根据需求来,把文件夹业务代码一个区分。第四步,尝试改动代码。1.查看语言包,了解并掌握字段文字pages # 页面文件夹

高效学习框架项目

一步命令行运行下列命令快速启动开发服务

$ npm i @ant-design/pro-cli -g
$ pro create my-app


$ cd my-app
$ npm i
$ npm run start 

# 打开浏览器访问 http://localhost:8000
# 如果安装过程出现报错,请更新包

$ npm update

第二步快速了解ant design pro目录文件

package.json 文件相关的配置和版本,充分了解这些配置有助于我们提高开发效率

config #目录配置信息文件夹

configroutes.ts 路由文件

mock #模拟数据文件

public   # 静态源文件

src      # 源代码文件夹

pages # 页面文件

第三步,组件总览 – Ant Design快速看一遍。

https://ant-design.antgroup.com/components/overview-cn

第四步,尝试改动代码比如新增菜单栏

1.查看语言包,了解并掌握字段文字

src / locales/ zh-CN 文件夹全部预览一遍,找到menu.ts 文件

menu.home‘: ‘首页‘, 在这个后面加一个,’menu.user‘: ‘用户‘, 

第五步,在路由文件添加路由信息

{
    path: '/welcome',
    name: 'home',
    icon: 'smile',
    component: './Welcome',
  },

后面加一代码

{
    path: '/welcome',
    name: 'user',
    icon: 'smile',
    component: './Welcome',
  },

然后你就看到,导航栏有变化了,有个初步了解。就根据这种方法修改,慢慢深入理解

六步。正式项目架构参考

├── src                       # 源代码文件夹
│   ├── api                   # API 接口文件夹
│   ├── assets                # 静态资源文件夹
│   ├── components            # 公共组件文件夹
│   ├── layouts               # 布局文件夹
│   ├── models                # 数据模型文件夹
│   ├── pages                 # 页面文件夹
│   ├── router                # 路由配置文件夹
│   ├── store                 # Redux 状态管理文件夹
│   ├── styles                # 样式文件夹
│   └── utils                 # 工具函数文件夹

请根据需求来,把文件夹和业务代码做一个区分。规范一下

然后继续进行开发吧。

原文地址:https://blog.csdn.net/m0_60459392/article/details/134710995

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41712.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注