从零开始架构react后台管理系统(1)


一个优秀的框架往往在开发的过程中发挥着不可替代的作用,首次架构非常重要,一个优秀的框架会使得我们的开发效率大大提升


一、为什么用antd-design框架?

优点:

🌈 提炼自企业级中后台产品的交互语言和视觉风格。

📦 开箱即用的高质量 React 组件。

🛡 使用 TypeScript 开发,提供完整的类型定义文件。

⚙️ 全链路开发和设计工具体系。

🌍 数十个国际化语言支持。

🎨 深入每个细节的主题定制能力

二、如何创建react项目

1.创建react项目

如何创建react项目:

  npx  creact-app  react-antd-demo

2.拉取webpack隐藏文件

如何拉取webpack隐藏文件:

npm  run  eject

在这里插入图片描述

三、如何按需加载antd-design文件

1. babel-plugin-import(推荐)

npm  install  babel-plugin-import   --save-dev

2. 这时我们需要配置一下 .babelrc 文件

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ] 
}

3. 启动项目

npm  run  start

总结

以上就是如何按需加载antd-design 组件 ,如何创建一个react+antd的基本项目

代码地址
希望有朋友可以参与进来,大家一起进步

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值