• 6. 使用antd pro构建web页面


    前言

    在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段。这里假定我们已经了解了react,redux和dva/umi相关的知识。并有做过相关练习。

    如果还不了解以上相关的知识,建议去以下网站学习一遍,下面给出一个大概学习的路线吧。

    • html/css/js

      这里推荐大家去w3cschool稍作了解,不过看本篇文章的同学肯定都是有一定基础的。那么就当做巩固好了。

    • es6

      这里我没有系统看过教程,我是在一本叫做react学习手册的书上面看到的。这里还是放一下地址吧,可以去阮一峰老师的博客看,也可以去这里学习es6的一些新特性。比如箭头函数,promise,let等。

    • react+redux

      react的话,一开始我几乎是没有入门。拿着react-element里的demo就开始实操了,遇到了各种各样的问题。在寻找solution的时候遇到了一本名曰react小书的教程,觉得实在是再合适不过了。同时里面还有redux的部分教程(第三部分)。

    • dva

      dva是一个封装了redux和router等方法的框架,掌握了它的api,可以快速完成react项目的开发。具体教程还请看 官网dvajs

    antd pro介绍

    antd是ant design的缩写,顾名思义,它是蚂蚁金服的前端设计团队出品的一款UI组件库,如果要类比的话,我会把他比作bootstrap,但是它又远远比bootstrap好看且交互性更强。而antd pro,就是它的专业版。为什么呢,因为antd pro已经是一个完整的中后台项目,我们如果需要快速开发的话,直接拿着里面的页面修改便是了。但是我个人总结了一下,缺点也很明显,就是antd pro做出来的系统几乎都长一个样,长久了会有审美疲劳,至少我对bootstrap也是这样的,当然蚂蚁出的东西品质是真的棒!

    话不多说,先看看它的预览页面

    以下是随便截取的几个图片,感受一下它的美。

    image.png

    image.png

    image.png

    下载antd pro

    以上内容均来自antd pro官网

    第一步: 克隆项目,我们将之克隆到Lamb的client目录下,由于我不想在Lamb中创建2个git项目,所以我选择去github下载代码。

    image.png

    如果你想随时升级antd pro或者给它们提pull requests,则执行以下命令。

    $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
    $ cd my-project
    

    下载后解压并放入Lamb/client目录。

    image.png

    安装依赖包

    • 确保你安装了nodejs,这样你就拥有强大的包管理工具npm

    • 使用npm安装cnpm,因为国内有很多资源是访问受限的,所以需要淘宝开源的cnpm。

      在cmd/shell窗口输入并回车。

      npm install -g cnpm --registry=https://registry.npm.taobao.org

    • 安装antd pro依赖包

      进入Lamb/client目录执行命令cnpm install

      image.png

      image.png

    • 尝试在本地运行antd pro

      在Lamb/client目录下输入npm start并回车

      image.png

      接着浏览器就自动打开了页面http://localhost:8000,那么我们的antd pro就成功部署了。

      image.png

    上一篇: 使用Flask蓝图

    下一篇: 给Lamb配置flask-sqlalchemy

    github地址: https://github.com/wuranxu/Lamb

  • 相关阅读:
    docker内存和cpu调试
    docker网络之overlay
    docker网络之bridge
    kubernete的证书总结
    docker网络之macvlan
    理解kubernetes环境的iptables
    前端面试题和答案
    软件项目技术点(25)——提升性能之检测绘制范围
    setTimeout的实现原理以及setTimeout(0)的使用场景
    HTML5新特性之WebSocket
  • 原文地址:https://www.cnblogs.com/we8fans/p/9908227.html
Copyright © 2020-2023  润新知