建设银行报网站,wordpress图片主题下载,巩义市网站建设培训班,中铁建设集团有限公司天津分公司高效学习 用框架做项目。
第一步命令行运行下列命令#xff0c;快速启动开发服务
$ npm i ant-design/pro-cli -g
$ pro create my-app$ cd my-app
$ npm i
$ npm run start # 打开浏览器访问 http://localhost:8000
# 如果安装过程中出现报错#xff0c;请更新包$ npm upd…高效学习 用框架做项目。
第一步命令行运行下列命令快速启动开发服务
$ 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 #目录配置信息文件夹
config -- routes.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 # 工具函数文件夹
请根据需求来把文件夹和业务代码做一个区分。规范一下
然后继续进行开发吧。
