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的完整安装与使用

    image-20210525075434846

    • 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 (
    			<div>
    				<DatePicker />
    			</div>
    		);
    	}
    }
    
  • 常用组件的使用

    • 需要先将组件引入
    • 再进行组件的使用
    • 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 (
			<div>
				<DatePicker />
			</div>
		);
	}
}

四 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 less@3.13.1 less-loader@7.3.0 --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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content
  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
umi 是一个基于 react 的前端开发框架,它提供了一些方便的工具和规范,帮助我们更快地搭建和部署移动端 web 项目。而 antd design 是一个优秀的 UI 组件库,它提供了丰富的组件,能够满足我们在移动端 web 项目中的各种需求。 首先,我们可以使用 umi 来初始化一个移动端项目。umi 提供了脚手架工具,可以帮助我们快速创建一个基本的项目结构。通过命令行工具,我们可以选择使用 umi 内置的模板和插件,来搭建一个符合我们需求的移动端项目。 接着,我们可以使用 antd design 来构建我们的移动端页面。antd design 提供了丰富的 UI 组件,如导航栏、按钮、表单等等,这些组件都经过了精心设计和优化,可以帮助我们快速构建漂亮而且功能丰富的移动端页面。我们可以通过引入 antd design 的组件库,然后按照官方文档的指引使用这些组件,实现我们的页面功能。 在搭建项目时,umi 提供了一些功能和规范,例如路由配置、状态管理等。我们可以使用 umi 提供的路由功能来管理页面之间的跳转和传参,通过 umi 的状态管理功能可以更好地管理组件的状态和数据。同时,umi 还支持按需加载和自动优化等功能,能够提高项目的加载速度和性能。 总的来说,umi antd design react 搭建移动端 web 项目是一个很便捷和高效的选择。umi 提供了一个规范的开发框架,antd design 提供了丰富的 UI 组件,它们的结合可以帮助我们更快速地构建移动端 web 项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值