Ant Design和 Ant Design Pro 有什么区别？
可以理解为 Ant Design是一套 React 组件库，而 Pro 是使用了这套组件库的完整前端脚手架。
而且pro还集成了Ant Design Pro Components组件库，所有pro非常适合开箱即用的中后台开发。
Ant Design 组件库 （ https://ant-design.antgroup.com/components/overview-cn/ ）
Ant Design Pro Components组件库 （https://procomponents.ant.design/ ）
Ant Design Pro （ https://pro.ant.design/zh-CN/docs/overview ）
Chrome DevTools调试
可以按照文档运行 npm start启动并使用 google 的 Chrome DevTools工具调试
vscode调试
使用vscode进行调试时，可以在vscode里打断点，比较方便
vscode调试需要在项目根目录/.vscode/文件夹里下配置launch.json和tasks.json
1，根据Ant Design Pro入门文档创建项目 https://pro.ant.design/zh-CN/docs/getting-started
2，vscode打开项目根目录
3，项目根目录创建“.vscode”文件夹，添加launch.json和tasks.json
launch.json如下配置
点击查看代码
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"preLaunchTask": "npm: start",
"webRoot": "${workspaceFolder}"
}
]
}
tasks.json 内容如下
点击查看代码
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}
4，f5开始调试
