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

cppprimer 发布于2019-08-30 15:54 / 603人阅读

摘要：基础知识使用脚手架创建项目并启动安装脚手架使用脚手架创建项目为项目名。否则可能导致项目发布上线后，报错无法执行。安装测试使用注意默认情况下安装的需要引入才会生效样式，但很多时候，我们只是使用了部分组件，引入整个样式文件，有些得不偿失。

基础知识

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

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 (
      
          
      
    );
  }
...

注意：默认情况下安装的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！

作者博客：做全栈攻城狮

分享交流前后端知识，一起做全栈攻城狮。

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2y2zuha3q6uc0

云服务器混合云 Ant Design ant-design 前端组件开发前端react

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117088.html

UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

archieyang 2019-08-05 10:28 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0