前言
Create React App是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。
Ant Design是一套企业级 UI 设计语言和 React 组件库。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。
Ant Design Pro
是一个企业级中后台前端/设计解决方案。
Ant Design Mobile
是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。
antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。它的特性:
提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。使用 TypeScript 开发,提供完整的类型定义文件。全链路开发和设计工具体系。数十个国际化语言支持。深入每个细节的主题定制能力。
接下来,我们来看怎样在 React 项目中使用 antd 开发移动端项目,并且完成自定义 webpack 配置。
1. 创建 react 项目
使用 create-react-app 脚手架,可以快速创建一个 react 单页面项目,自动创建的项目是基于webpack + ES6。在终端中执行下面的命令,即可快速创建一个react 项目。
npm install -g create-react-app my-app
国内使用 npm 速度很慢,在终端执行下面的命令,可以将npm镜像切换为淘宝镜像,再进行 npm install 安装
npm config set registry http://registry./
不想全局安装的话,也可以使用npx命令,在终端中执行以下命令,./
表示在当前目录下创建 react 项目,版本要求: Node >= 8.10 和 npm >= 5.6。
npx create-react-app ./
安装成功后,执行npm start
即可启动项目。
在浏览器中打开 http://localhost:3000/ ,看到下面这个页面,则说明项目创建成功了。
2. 直接安装并引入 antd
在终端中执行下面的命令,安装 antd
npm install antd-mobile --save
修改 src/App.js 文件,引入 antd 的按钮组件。
import React from 'react';import {Button } from 'antd-mobile';import './App.css';const App = () => (<div className="App"><Button type="primary">Button</Button></div>);export default App;
修改 src/App.css,在文件顶部引入 antd-mobile.css 文件
import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'
重新启动项目,可以看到页面上已经有了 antd-mobile 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。
3. 高级配置
上面的操作在实际开发中还有一些优化的空间,比如无法进行主题配置,而且上面的例子加载了全部的 antd 组件的样式(gzipped 后一共大约 60kb)。
如果我们需要对 create-react-app 的默认配置进行自定义,这里我们使用react-app-rewired
(一个对 create-react-app 进行自定义配置的社区解决方案)。
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,你还需要安装customize-cra
。
3.1 安装 react-app-rewired customize-cra
在终端中执行下面的命令,安装 react-app-rewired customize-cra
yarn add react-app-rewired customize-cra -D
3.2 修改 package.json 文件
修改package.json文件对应内容
/* package.json */"scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- "test": "react-scripts test",+ "test": "react-app-rewired test",}
3.3 创建 config-overrides.js 配置文件
在项目根目录下创建 config-overrides.js 配置文件,用于修改 webpack 配置项。
const {override} = require("customize-cra");module.exports = function override(config, env) {// do stuff with the webpack config...return config;};
做完上述操作后,执行npm start
或者yarn start
,检查项目是否能够正常启动。
3.4 安装 antd-mobile UI库
终端中执行下面的命令,安装 antd-mobile UI库
yarn add antd-mobile -S
按需加载要使用的模块,并引入样式文件
import React from 'react';import {Button} from 'antd-mobile';import 'antd-mobile/dist/antd-mobile.css'const App = () => (<div className="App"><Button type="primary">Button</Button></div>);export default App;
3.5 配置别名
webpack 中配置别名,修改 config-overrides.js 配置文件的内容如下:
const {override,addWebpackAlias} = require("customize-cra");const path = require("path");module.exports = override( addWebpackAlias({["assets"]: path.resolve(__dirname, "./src/assets/")}));
点击查看
关于 customize-cra 的更多用法(如修改 webpack 更多配置项)。
3.6 配置代理
进行 Mock 数据的时候,可能会需要配置代理,我们使用 http-proxy-middleware 插件来完成这个功能。终端中执行下面的命令,安装 http-proxy-middleware 插件:
yarn add http-proxy-middleware -D
然后在 src目录下新建 setupProxy.js 配置文件,并进行相关的配置:
/* setupProxy.js */const {createProxyMiddleware} = require('http-proxy-middleware')module.exports =function(app){app.use('/api',createProxyMiddleware({target:"http://localhost:3033/",changeOrigin: true,pathRewrite:{'/api':''}}))}
3.7 使用 scss 样式
基于 creat-react-app 框架,使用 scss 语法,需要安装 node-sass,在终端中执行下面的命令,安装 node-sass
yarn add node-sass -S
安装完成后,不需要做额外的配置,可以直接引入 .scss 文件,react 底层会自动解析 scss 文件。
import './common.scss'
3.8 使用 Css-in-Js
在终端中执行下面的命令,安装 styled-components,使用 -S,作为开发依赖
yarn add styled-components -S
新建后缀为 .js 的样式文件,例如新建 HeaderBar.style.js 文件内容如下:
import styled from 'styled-components'import searchIcon from 'assets/images/search.png' //导入图片const HeaderBarContainer=styled.div`background:url(${searchIcon}) left center no-repeat;line-height:0.9rem;text-align:center;font-size:0.4rem;`export {HeaderBarContainer}
在组件中使用:
import React, {Component } from 'react'import ReactDOM from 'react-dom'import {HeaderBarContainer} from './HeaderBar.style'class HeaderBar extends Component {render() {return (<HeaderBarContainer>标题内容</HeaderBarContainer>)}}ReactDOM.render(<HeaderBar />,document.getElementById('root'));
需要注意的是:
styled-components 插件,不能跟 postcss 同时使用,也就是不能自动将 px 单位转成 rem 或者 vw;在样式组件里直接写图片路径是解析不了的,需要使用 import 先导入图片再写入 url 里,导入时会将图片解析成 Base64 图片编码;
React 项目中使用 antd 组件库开发移动端项目,在项目中自定义 webpack 配置,就先写这么多,以后用到别的内容再来更新。