项目初始化

刀刀

0字

0分钟

2025/8/31

项目创建

采用 create-react-app 创建 React 版项目。

shell

npx create-react-app news

依赖引入

依赖引入处理最大宽度

shell

yarn add reset.css
yarn add sass sass-loader

// 处理最大宽度
;(function () {
  const handleMax = function handleMax() {
    let html = document.documentElement,
      root = document.getElementById('root'),
      deviceW = html.clientWidth
    root.style.maxWidth = '750px'
    if (deviceW >= 750) html.style.fontSize = '75px'
  }
  handleMax()
})()

单位换算

引入依赖实现响应式布局：

shell

yarn add lib-flexible
yarn add postcss-pxtorem

在 src 目录下 index.js 里引入 lib-flexible。

javascript

import 'lib-flexible'

修改 webpack.config.js（这个文件在 node_modules 文件夹下的 react-scripts 文件夹下的 config 文件夹中）。

引入代码添加

javascript

const pxtorem = require('postcss-pxtorem')

javascript

pxtorem({ rootValue: 75, unitPrecision: 5, propList: ['*'] })

路径别名

用 create-react-app 创建的 React 版项目路径别名配置需要先下载两个依赖：

shell

yarn add react-app-rewired
yarn add customize-cra

下载完毕后在根目录下创建 config-overrides 用于配置别名，代码如下：

const { override, addWebpackAlias } = require('customize-cra')

const path = require('path')

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src/'),
  })
)

紧接着修改 package.json 文件中的 scripts 对象内的启动语句，代码如下：

json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

现在重新运行，可以使用路径别名了。

组件库使用

本项目使用的是 antd-mobile 组件库。使用方法如下：

引入组件库
shell
```
yarn add antd-mobile
```
1

国际化配置

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/App'

// 国际化语法包
import { ConfigProvider } from 'antd-mobile'
import zhCN from 'antd-mobile/es/locales/zh-CN'

// ...

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>
)

贡献者

Orange

duyidao

v_duyilin

平安喜乐

页面历史

最后编辑于 8 天前

查看完整历史

项目初始化 ​

项目创建 ​

依赖引入 ​

单位换算 ​

路径别名 ​

组件库使用 ​

贡献者

页面历史

项目初始化

项目创建

依赖引入

单位换算

路径别名

组件库使用