1. 创建React+TypeScript项目

create-react-app projectName --template typescript

2. 初始化GIT仓库

git init
git add .
git commit -m "init"

3. 暴露webpack配置文件

// 需要前面的初始化仓库支持
npm run eject

4. 添加less

yarn add less less-loader

5. 修改webpack配置(添加less)

找到webpack.config.js，添加

const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/

image

然后在module对象中的rules中解析less

// less
{
  test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        'less-loader'
    ),
    sideEffects: true
},
{
  test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: {
                getLocalIdent: getCSSModuleLocalIdent
            }
        },
        'less-loader'
    )
}

image

6. 移动端适配

添加lib-flexible和postcss-pxtorem

yarn add lib-flexible postcss-pxtorem

在index.tsx引入lib-flexible

import 'lib-flexible';

image

在webpack.config.js中配置postcss-pxtore插件，在postcssOptions中配置

[
    'postcss-pxtorem',
  {
    rootValue: 75,
    unitPrecision: 5,
    selectorBlackList: ['adm'], // 过滤antd-mobile插件
    propList: [*]
  }
]

image

7. 添加antd-mobile UI框架

antd-mobile官网

yarn add antd-mobile