专栏首页做全栈攻城狮采用React+Ant Design组件化开发前端界面(一)

采用React+Ant Design组件化开发前端界面(一)

react-start

基础知识

1.使用脚手架创建项目并启动

​ 1.1 安装脚手架:

npm install -g create-react-app

​ 1.2 使用脚手架创建项目:

create-react-app antd-start-demo           antd-start-demo为项目名。

​ 1.3 启动

npm start
2.npm转换为yarn

​ 2.1 安装yarn:

 npm install -g yarn

​ 2.2 获取yarn当前的镜像源:

yarn config get registry

​ 2.3 设置为淘宝镜像:

yarn config set registry 'https://registry.npm.taobao.org'

​ 2.4 常用命令:

yarn init       --初始化
yarn add        --添加模块
yarn remove     --删除模块
yarn /yarn install      --安装项目中的依赖

项目搭建

2.1 安装react-router 4.0、axios、less-loader
yarn add react-router-dom axios less-loader
2.2 暴漏webpack配置
yarn eject

webpack配置

2.3 配置less-loader

​ antd是基于less开发的,我们使用less可以方便的改变主题色等配置。

​ 安装less模块:yarn add less@2.7.3

​ 打开config/webpack.config.dev.js添加如下配置:

{
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: { importLoaders: 1 },
              },
              {
                // Options for PostCSS as we reference these options twice
                // Adds vendor prefixing based on your specified browser support in
                // package.json
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebook/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    require('postcss-preset-env')({
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    }),
                  ],
                },
              },
              { loader: require.resolve('less-loader') }
            ],
},

到配置cssload同级如图所示

图片示例

注意:在webpack.config.dev.js添加的配置部分,也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后,报错无法执行。

2.4 安装antd
 yarn add antd
2.5 测试使用
import { Button } from "antd";
import 'antd/dist/antd.css';

...
 render() {
    return (
      <div>
          <Button>click</Button>
      </div>
    );
  }
...

注意:默认情况下安装的antd需要引入antd/dist/antd.css才会生效样式,但很多时候,我们只是使用了部分组件,引入整个antd样式文件,有些得不偿失。所以按需加载应运而生。

2.6 antd按需加载

1.添加babel-plugin-import,

yarn add babel-plugin-import

2.打开webpack配置,搜索:JS with Babel

找到如下配置:

// Process application JS with Babel.
          // The preset includes JSX, Flow, TypeScript and some ESnext features.
          {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            include: paths.appSrc,

            loader: require.resolve('babel-loader'),
            options: {
              customize: require.resolve(
                'babel-preset-react-app/webpack-overrides'
              ),
              
              plugins: [
                [
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                      },
                    },
                  },
                ],
              ],
              cacheDirectory: true,
              // Save disk space when time isn't as important
              cacheCompression: true,
              compact: true,
            },
          },

进行修改plugin下添加:

["import", { "libraryName": "antd", "style": true }]

至此可以取消引入css文件了,babel会自动根据引入的组件,默认加载对应的css。

2.7修改主题色
              {
                loader: require.resolve('less-loader'),
                options: {
                  modules: false,
                  modifyVars: {
                    "@primary-color": "#f9c700"
                  }
                }
              }

在webpack,中配置less的地方即可修改。@primary-color为antd内置的less变量,只需要覆盖掉默认的配置,就实现了修改主题色。

本文GitHub代码:GitHub地址 欢迎star!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 采用React+Ant Design组件化开发前端界面(一)

    注意:在webpack.config.dev.js添加的配置部分,也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后...

    做全栈攻城狮
  • 装逼神器:现在游戏这么火,你也可以做到,带你制作一款小游戏4

    本教程致力于.Net程序员可以利用unity技术快速学习和入门游戏开发。一方面通过自己的总结希望可以帮助更多热衷与游戏开发或者编程技术开发的同仁。另一方面可以总...

    做全栈攻城狮
  • 做全栈攻城狮-安卓开发教程目录

    1.程序员带你学习安卓开发,十天快速入门-安卓学习必要性:http://www.toutiao.com/i6319356348286894594/

    做全栈攻城狮
  • 采用React+Ant Design组件化开发前端界面(一)

    注意:在webpack.config.dev.js添加的配置部分,也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后...

    做全栈攻城狮
  • 数字时代,如何夺回涣散的注意力?

    撰文:Jacob Weisberg 翻译:陶小路  《东方历史评论》 1 “手上没活的时候我们抽烟;不想问题的时候我们读《时代周刊》,”麦克唐纳...

    腾讯研究院
  • 那些面试官,都是如何把候选人聊崩溃的

    在候选人眼里,面试官就代表企业形象,面试官的能力就代表企业能力,所以,我希望面试官是专业的。请不要随便选一个小朋友来面试我,我宁愿多等一会。

    架构师之路
  • 兄弟,你太用力了

    非常理解候选人急切的心情,但“用力过猛”未必是加分的。今天,站在面试官的角度,给大家一些小的建议,希望对大家有帮助。

    架构师之路
  • 漫画:美团面试题(面试时,面试官给了我一块巧克力。。)

    今天是小浩算法“365刷题计划”第76天。这次小浩又出去面试,虽然面试官没让他修电暖气,但却给了他一块巧克力。。。(题目由读者在美团面试后提供)

    程序员小浩
  • 程序员(工作1年多)被裁员,闭关十多天,连面四家全过程.....

    他是二本毕业一年,实习一年,最近的一家公司是做物联网,智能家居的,离职原因是裁员,没什么不好意思的,公司发展不下去呗,这也不是老板愿意看到的。在宿舍学了10几天...

    Java架构技术
  • Android中Retrofit的简要介绍

    Retrofit是一个可用于Android和Java的网络库,使用它可以简化我们的网络操作,提高效率和正确率。它将请求过程和底层代码封装起来只暴露我们业务中的请...

    砸漏

扫码关注云+社区

领取腾讯云代金券