• 5-create-react-app整合antDesign功能


    使用ant-design:

    首先创建react项目:

    create-react-app app

    cd app

    其次

    AntDesign的高级配置:按需导入组件,自定义主题

    1.下载依赖(利用yarn,或者npm都行)

    yarn add react-router-dom    //装路由插件

    yarn add antd   //antd 插件 在 create-react-app 创建的工程中使用 antd

    yarn add react-app-rewired customize-cra    //react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)

    yarn add babel-plugin-import           //babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

    yarn add less less-loader       //按照 配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。

    2.修改package.json

      "scripts": {

        "start": "react-app-rewired start",

        "build": "react-app-rewired build",

        "test": "react-app-rewired test",

      }

    - 表示要删除的

    + 表示要添加的

     

    3,在项目根目录创建config-overrides.js

    在项目根目录创建一个 config-overrides.js 用于修改默认配置。(js配置文件需要修改)

    module.exports = function override(config, env) {

      // do stuff with the webpack config...

      return config;};

     

    const { override, fixBabelImports, addLessLoader } = require('customize-cra');

    module.exports = override(

      fixBabelImports('import', {

        libraryName: 'antd',

        libraryDirectory: 'es',

        style: true,

      }),

      addLessLoader({

       javascriptEnabled: true,

       modifyVars: { '@primary-color': '#1DA57A' },

     }),

    );

     

  • 相关阅读:
    JAVA设计模式之工厂模式(简单工厂模式+工厂方法模式)
    Java内部类详解 2
    内部类详解(很详细)
    《JAVA与模式》之简单工厂模式
    《JAVA与模式》之适配器模式
    多态
    java Final关键字
    java实例初始化块
    tween.js
    three.js 之旅 (三)
  • 原文地址:https://www.cnblogs.com/wskb/p/11209526.html
Copyright © 2020-2023  润新知