react-移动端项目
移动端项目
一 明确案例的需求
需要理解的概念有：
- 手机验证码的登录
- 手机验证码的获取
- 第三方平台的授权登录
- 第三方平台用户信息的获取
二 antd的基本使用
需要理解的概念有：
-
React的UI框架有哪些
- https://ant.design/docs/react/introduce-cn
- https://material-ui.com/zh/
- https://zijieke.com/semantic-ui/
- https://react-bootstrap.github.io/
- https://apiblueprint.org/
- …
-
Antd的完整安装与使用
- yarn add antd
import React, { Component } from 'react'; import { DatePicker } from 'antd'; import 'antd/dist/antd.css'; // 需要引入样式内容，否则界面无样式效果 export default class App extends Component { render() { return (); } } -
常用组件的使用
- 需要先将组件引入
- 再进行组件的使用
- Button、Input、DatePicker、Icon、Modal…
三 antd的按需引入样式
需要理解的概念有： npm run build 压缩打包
- JS按需加载：
antd的 JS 代码默认支持基于 ES modules 的 tree shaking - CSS按需加载：
- 模块安装：npm add @craco/craco craco-less craco-antd
- 配置文件：package.json(二次环境配置)
{
"name": "hello-react",
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
...
}
- 配置文件：craco.config.js
react是基于webpack配置运行的，但是我们看不到任何的webpack配置，只能用eject进行弹射时才能查看。
为社么使用require? 因为webpack是基于commonjs的
webpack基于五大核心概念：入口 出口 加载器 模式 插件
const CracoAntDesignPlugin = require('craco-antd');
//设置了一个插件
module.exports = {
plugins: [{ plugin: CracoAntDesignPlugin }],
};
App.js，去除css的引入
import React, { Component } from 'react';
import { DatePicker } from 'antd';
export default class App extends Component {
render() {
return (
四 antd自定义主题
需要理解的概念有：
- 默认主题的使用
- 自定义主题的修改
App.js，引入less
import React, { Component } from 'react';
import { DatePicker } from 'antd';
import './App.less';
export default class App extends Component {
render() {
return (
<div>
<DatePicker />
</div>
);
}
}
App.less，引入less
@import '~antd/dist/antd.less';
- 配置文件：craco.config.js
//安装插件
const CracoLessPlugin = require('craco-less');
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
plugins: [
{ plugin: CracoAntDesignPlugin },
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#ffcc00' },
// 设置自定义主题样式
// 配置参数：https://ant.design/docs/react/customize-theme-cn
javascriptEnabled: true,
},
},
},
},
],
};
五 antd-mobile的配置
需要理解的概念有：
-
react项目的创建
-
UI框架的安装与使用
-
antd-mobile的安装使用与配置
https://mobile.ant.design/docs/react/use-with-create-react-app-cn
1.项目的创建、模块的安装以及package.json文件的修改
npm i antd-mobile --save
# less与less-loader需要指定版本，如果按最新版本会出现兼容性错误问题以及less语法等后续问题 按需加载
npm i babel-plugin-import customize-cra react-app-rewired [email protected] [email protected] --sav-dev
package.json
{
"name": "react-mobile",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd-mobile": "^2.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-plugin-import": "^1.13.3",
"customize-cra": "^1.0.0",
"less": "^3.13.1",
"less-loader": "^7.3.0",
"react-app-rewired": "^2.1.8"
}
}
2.config-overrides.js 的创建-按需加载
const { override, fixBabelImports } = require('customize-cra');
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
})
);
3.html文件的修改，加入移动端特性内容
public/index.html
https://mobile.ant.design/docs/react/introduce-cn#3.-%E4%BD%BF%E7%94%A8
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js">script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
}
if (!window.Promise) {
document.writeln('