React+Ant Design开发环境搭建的实现步骤_React

来源:脚本之家  责任编辑:小易  

基础知识

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

提示: 如果运行yarn eject报错

在这里插入图片描述

在我们修改了文件之后,在使用 yarn eject命令时,会报以上错误,这是因为我们使用脚手架创建项目时,自动增加了 .gitignore 文件,而我们本地却没有仓库,这时候只需执行以下命令把项目添加到我们本地仓库,在执行即可。
解决办法:

git add .
git commit -m 'init'
yarn eject

然后运行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变量,只需要覆盖掉默认的配置,就实现了修改主题色。

注意: 运行yarn run start报错
报错ValidationError: Invalid options object. Less Loader has been initialized using an opti ons object

解决方法: 卸载less-loader,安装less-loader@5.0.0

yarn remove less-loader
yarn add less-loader@5.0.0

到此这篇关于React+Ant Design开发环境搭建的实现步骤的文章就介绍到这了,更多相关React Ant Design搭建内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:使用hooks写React组件需要注意的5个地方Vite搭建React项目的方法步骤react获取input输入框的值的方法示例react实现Radio组件的示例代码React Router 如何使用history跳转的实现聊一聊我对 React Context 的理解以及应用react hooks入门详细教程使用 React 和 Threejs 创建一个VR全景项目的过程详解简单分析React中的EffectList

  • 本文相关:
  • vite搭建react项目的方法步骤
  • react中使用setinterval函数的实例
  • 浅谈react router关于history的那些事
  • react.cloneelement的使用详解
  • 聊一聊我对 react context 的理解以及应用
  • react实现登录表单的示例代码
  • 基于react hooks,zarm组件库配置开发h5表单页面的实例代码
  • 如何使用redux toolkit简化redux
  • react+antd 实现可增删改表格的示例
  • react hook的使用示例
  • 如何在windows下搭建react开发环境上,实现网站的r...
  • 如何使用Ant-Design这个基于React开发的前端框架
  • 前段开发环境搭建 如何使用nodejs+react搭建一个初...
  • react.js的ant design Pro 不知道怎样依靠npm安装...
  • 如何在 NodeJs 上搭建 React 开发环境
  • 如何用reactjs构建一个完整的前端页面
  • 怎么用npm搭建一个react环境
  • 用react+redux+ant-design写一个Web系统,应该用什...
  • react ant怎么配置按需加载
  • 如何在windows下搭建react开发环境上,实现网站的r...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库使用hooks写react组件需要注意的5个地方vite搭建react项目的方法步骤react获取input输入框的值的方法示例react实现radio组件的示例代码react router 如何使用history跳转的实现聊一聊我对 react context 的理解以及应用react hooks入门详细教程使用 react 和 threejs 创建一个vr全景项目的过程详解简单分析react中的effectlistvite搭建react项目的方法步骤react中使用setinterval函数的实例浅谈react router关于history的那些事react.cloneelement的使用详解聊一聊我对 react context 的理解以及应用react实现登录表单的示例代码基于react hooks,zarm组件库配置开发h5表单页面的实例代码如何使用redux toolkit简化reduxreact+antd 实现可增删改表格的示例react hook的使用示例一看就懂的reactjs基础入门教程-使用 react 和 threejs 创建一个react获取input输入框的值的方法react利用路由实现登录界面的跳转react实现radio组件的示例代码react hooks入门详细教程react中使用setinterval函数的实深入理解react native核心原理(rreact html中使用react的两种方式详解对于react结合antd的form组件深入理解react native核心原理(react natreact中使用setinterval函数的实例聊一聊我对 react context 的理解以及应用react实现radio组件的示例代码react+ant design开发环境搭建的实现步骤react利用路由实现登录界面的跳转react+antd 实现可增删改表格的示例react hook的使用示例使用 react 和 threejs 创建一个vr全景项react html中使用react的两种方式
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved