react项目安装配置 antd-mobile

发表于 | 分类于 | 评论数： | 阅读次数：

使用 create-react-app,react-router-dom,postcss-px-to-viewport,antd-mobile构建项目.

相关文档:

create-react-app

reactRouterDom

antd-mobile

项目构建&依赖安装

使用 create-react-app构建项目(typescript)

1
yarn create react-app my-app --template typescript

安装 postcss-px-to-viewport

1
yarn add postcss-px-to-viewport

安装 babel-plugin-import

1
yarn add babel-plugin-import

安装 react-router-dom

1
yarn add react-router-dom @types/react-router-dom

安装 styled-components

1
yarn add styled-components @types/styled-components

安装 antd-mobile

1
yarn add antd-mobile

配置项目

暴露react配置:

1
yarn eject

修改 /config/wepack.config.js以添加 post-css-px-to-viewport

1
2
3
4
5
6
7
8
9
require("postcss-px-to-viewport")({
       viewportWidth: 1920, // (Number) The width of the viewport.
       viewportHeight: 1080, // (Number) The height of the viewport.
       unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
       viewportUnit: "vw", // (String) Expected units.
       selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
       minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
       mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
     }),

这一步可以使得项目获得移动端分辨率自适应的能力.

添加 babel-plugin-import

在 package.json中找到下面的内容:

1
2
3
4
5
"babel": {
    "presets": [
      "react-app"
    ],
  }

添加一部分内容,变为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]
  }

添加之后可以实现antd-mobile组件的按需加载功能.

1
2
3
4
5
6
7
8
9
import { Button } from "antd-mobile";
export function App() {
  return (
    <div>
      <Button type='ghost'>button</Button>
      123
    </div>
  );
}
thank u !