传送门

开始

项目使用ReactJS + TS
前端UI框架使用 AntDesign-Mobile
移动端适配使用 postcss + flexible

创建项目

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用vite创建项目 npm create vite@latest
根据程序指引，选择ReactJS、TS/JS 、 SWC
执行命令如下

(base) xxx@deMacBook-Pro xxxx % npm create vite@latest

> npx
> create-vite

✔ Project name: … frontend-mobile
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /mypath/frontend-mobile...

Done. Now run:

  cd frontend-mobile
  npm install
  npm run dev

(base) xxx@deMacBook-Pro xxxx %   cd frontend-mobile
(base) xxx@deMacBook-Pro frontend-mobile % npm i     
(base) boluo@deMacBook-Pro frontend-mobile % npm i

added 158 packages in 10s

38 packages are looking for funding
  run `npm fund` for details
(base) xxx@deMacBook-Pro frontend-mobile % npm run dev

> frontend-mobile@0.0.0 dev
> vite


  VITE v5.2.11  ready in 211 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

安装AntDesgin-Mobile

1	npm install --save antd-mobile

移动端适配

本项目使用 amfe-flexible postcss-pxtorem

1.安装插件

npm i autoprefixer amfe-flexible postcss postcss-pxtorem -S -D

2.根目录增加 postcss配置文件

新增postcss配置文件postcss.config.js
文件内容：

export default {
    'plugins': {
      'autoprefixer': {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'not ie <= 11',  
          'ff >= 30',
          '> 1%',
          'last 2 versions', // 所有主流浏览器最近2个版本
        ],
        grid: true ,
      },
      'postcss-pxtorem': {
        rootValue: 75, // //换算基数，1rem相当于10px,按照设计稿给的尺寸/10 即可
        unitPrecision: 6,
        selectorBlackList: ['.no-rem', 'no-rem'],
        propList: ['*'],
        replace: true,
        mediaQuery: true,
        minPixelValue: 2,
        exclude: /node_modules/i
      }
    }
  }