移动端开发项目搭建流程记录

一、项目搭建

1、目录创建：

create-react-app:创建项目。

引入样式文件index.scss 引入报错，提示没有找到sass 文件。需要我们安装依赖：yarn add sass -D

• 使用组件库：antd design mobile 移动端ui组件库。

2、项目配置项：

当我们想要修改项目的配置的时候，而且我们不想要影响原来的webpack的配置，我们需要安装两个插件，分别是：react-app-rewired 和 customize-cra;

• react-app-rewired:是用来修改启动命令的。
• 在根目录下新建文件config-overrides.js

//config-overrides.js
	
	//用于覆盖webpack的配置
	module.exports = function override(config,env) {
    // do stuff with the webpack config ...
    return config
}

• 通过上面的启动命令之后，我自动的配置上面的文件。

安装命令：
npm install react-app-rewired customize-cra --save-dev

• 我们还需要配置按需加载，需要安装插件：

npm install babel-plugin-import -D

• 按需加载还需要修改上面的config-overrides.js文件内容

//config-overrides.js

const {
    override,
    fixBabelImports,
    addLessLoader,
} = require("customize-cra");


module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { "@primary-color": "#1DA57A" }
    })
);

按需加载的好处就是不用在index.js文件中直接导入全的antd-mobile样式了

项目报错了，需要把,的版本降低，使用下面的命令：
react-app-rewired@2.0.2-next.0

• 配置根目录文件的提示路径

//jsconfig.json--跟目录下
	{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@/scss/*": ["src/assets/styles/*"]
    }
  }
}

3、整体目录

4、配置视口单位插件

目标：通过webpack插件将px单位自动转换成视口长度单位vw/vh,实现页面对不同屏幕的自动适配。

• 使用postcss-px-to-viewport插件，可让我们直接在代码中按设计稿的px值来编写元素尺寸，他们最终会自动转换成vw/vh长度单位。
• 安装 postcss-px-to-viewport

	yarn add postcss-px-to-viewport -D

• 在config-overrides.js中添加配置代码：

---

项目报错antd无法加载的时候检查下面的配置，可以解决无法加载的问题

二、使用craco来配置webpack配置。

为什么使用这两个种方式来配置webpack的配置，是因为使用create-react-app创建的项目不会暴露config配置项。
通过这个方式，可以配置webapck配置，并且合并到webpack配置项中。

链接: cacro文档地址

最重要的浏览器适配，使用 postcss-px-to-viewport

1、安装

	yarn add postcss-px-to-viewport-8-plugin

2、配置cacro.config.js文件

	
const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
    style: {
        postcss: {
            mode: "extends",
            loaderOptions: {
                postcssOptions: {
                    ident: "postcss",
                    plugins: [
                        [
                            "postcss-px-to-viewport-8-plugin",
                            {
                                viewportWidth: 375, // 设计稿的视口宽度
                            },
                        ],
                    ],
                },
            },
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            return webpackConfig
        },
        alias: {
            '@@': pathResolve('.'),
            '@': pathResolve('src')
            // 此处是一个示例，实际可根据各自需求配置
        }
    },
    plugins: [
    ]
}

上面的两种方式，第二种通过cacro的方式可以实现浏览器适配，第一种报错，暂时未解决

三、表单校验的两种方式

1、两种方式都是基于Formik的组件的基础上

	//第一种实现的方式：基于formik自己的组件库
	import styles from './index.module.scss'
	import TopBar from "@/components/common/TopBar";
	import Input from '@/components/common/Input'
	import { useFormik } from 'formik'
	export default  function Login() {
        const formik = useFormik({
            initialValues:{
                mobile:'',
                code:''
            },
            onSubmit:(values)=>{
                console.log(values)
            },
            validate:(values)=>{
                const errors = {};
                if(!values.mobile) {
                    errors.mobile = '手机号码不能为空';
                }
                if(!values.code) {
                    errors.code = '验证码不能为空';
                }
                return errors;
            }
        });
    const onExtraClick = ()=>{
        console.log('haha')
    }
    const {values:{mobile,code},handleChange,handleSubmit,errors,handleBlur,touched} = formik;
    return (
        <div className={styles.root}>
            <TopBar>登录</TopBar>
            <div className='content'>
                <h3>短信登录</h3>
                <form onSubmit={handleSubmit}>
                    <div className='input-item'>
                        <Input
                            placeholder='请输入手机号'
                            name='mobile'
                            onChange={handleChange}
                            value={mobile}
                            autoComplete="off"
                            onBlur = {handleBlur}
                        ></Input>
                        {/*<div className='validate'>手机号码错误信息</div>*/}
                        {touched.mobile && errors.mobile?<div className='validate'>{errors.mobile}</div>:null}
                    </div>
                    <div className='input-item'>
                        <Input
                            placeholder='请输入验证码'
                            extra='获取验证码'
                            onExtraClick={onExtraClick}
                            onChange={handleChange}
                            autoComplete="off"
                            value={code} name="code"
                            onBlur={handleBlur}
                        ></Input>
                        {/*<div className='validate'>验证码错误信息</div>*/}
                        { touched.code && errors.code ?<div className='validate'>{errors.code}</div>:null}
                    </div>
                    <button type='submit' className='login-btn'>登录</button>
                </form>
            </div>
        </div>

    )
}

	//第二种方式：基于formik中使用yup组件，这种方式更加清晰，更加灵活，推荐使用这种。
	import styles from './index.module.scss'
	import TopBar from "@/components/common/TopBar";
	import Input from '@/components/common/Input'
	import { useFormik } from 'formik'
	import * as Yup from 'yup'
	export default  function Login() {
        const formik = useFormik({
            initialValues:{
                mobile:'',
                code:''
            },
            onSubmit:(values)=>{
                console.log(values)
            },
            validationSchema:Yup.object({
                mobile:Yup.string().required('手机号不能为空').matches(/^1[3-9]\d{9}$/,'手机号格式错误'),
                code:Yup.string().required('验证码不能为空').matches(/^\d{6}$/,'验证码格式错误')
            })
        });
    const onExtraClick = ()=>{
        console.log('haha')
    }
    const {values:{mobile,code},handleChange,handleSubmit,errors,handleBlur,touched} = formik;
    return (
        <div className={styles.root}>
            <TopBar>登录</TopBar>
            <div className='content'>
                <h3>短信登录</h3>
                <form onSubmit={handleSubmit}>
                    <div className='input-item'>
                        <Input
                            placeholder='请输入手机号'
                            name='mobile'
                            onChange={handleChange}
                            value={mobile}
                            autoComplete="off"
                            onBlur = {handleBlur}
                        ></Input>
                        {/*<div className='validate'>手机号码错误信息</div>*/}
                        {touched.mobile && errors.mobile?<div className='validate'>{errors.mobile}</div>:null}
                    </div>
                    <div className='input-item'>
                        <Input
                            placeholder='请输入验证码'
                            extra='获取验证码'
                            onExtraClick={onExtraClick}
                            onChange={handleChange}
                            autoComplete="off"
                            value={code} name="code"
                            onBlur={handleBlur}
                        ></Input>
                        {/*<div className='validate'>验证码错误信息</div>*/}
                        { touched.code && errors.code ?<div className='validate'>{errors.code}</div>:null}
                    </div>
                    <button type='submit' className='login-btn'>登录</button>
                </form>
            </div>
        </div>

    )
}