一、创建项目
使用脚手架命令创建新项目：
1.通过命令行创建项目
npx create-react-app ts-geek-park-h5 --template typescript2.src文件夹下，保留react-app-env.d.ts文件，删除其他文件，并且创建必要的文件
项目结构：
src
>api 封装接口
>assets 项目资源
>components 通用组件
>hooks 自定义钩子函数
>pages 页面组件
>store 仓库
>utils 工具封装
App.tsx 根组件
index.tsx 项目入口
react-app-env.d.ts（1）src下创建目录api、assets、components、hooks、pages、store、utils
mkdir api assets components hooks pages store utils（2）src下创建根组件 App.tsx
import React from 'react';
export default function App() {
return (
<div>
<h1>根组件</h1>
</div>
)
}（3）src下创建入口文件 index.tsx
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))3.修改页面模板 public/index.html 中的页面标题
<title>App</title>二、配置路径别名
1.安装修改 CRA 配置的包：
npm i -D @craco/craco -f2.在项目根目录中创建 craco 的配置文件：craco.config.js，并添加如下代码：
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src'),
},
},
}3.在项目根目录中新建 path.tsconfig.json，并添加如下代码：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}4.根目录的tsconfig.json 引入路径配置：（"extends": "./path.tsconfig.json",）
{
+ "extends": "./path.tsconfig.json",
"compilerOptions": {
"target": "es5",
......
}
}5.在package.json 文件修改启动命令
"scripts": {
-"start": "react-scripts start",
-"build": "react-scripts build",
-"test": "react-scripts test",
+"start": "craco start",
+"build": "craco build",
+"test": "craco test",
"eject": "react-scripts eject"
},6.测试路径导入
import imageSrc from '@/assets/space.png'
export default function App() {
return (
<div>
<img src={imageSrc } alt="" />
</div>
)
}7.重启脚手架
npm start三、配置 SASS 支持
1.安装 sass
npm i sass2.在 assets 文件夹下添加styles样式文件夹，并且添加样式文件index.scss
3.项目入口src\index.tsx 导入公用样式文件
import './assets/styles/index.scss'四、移动端1px像素边框
解决移动端Web开发中，在高清屏机型中，1px 会比较粗的问题
实现原理核心：伪元素 + transform 根据比例缩放
1. 新建文件 src/assets/styles/hairline.scss
// 参考： https://github.com/ant-design/ant-design-mobile/blob/v2/components/style/mixins/hairline.less
// 原理： 伪元素 + transform 缩放
// 伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放
@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
content: '';
position: absolute;
display: block;
z-index: 1;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
background-color: $color;
}
@mixin hairline($direction, $color: #000, $radius: 0) {
@if $direction == top {
border-top: 1px solid $color;
// min-resolution 用来检测设备的最小像素密度
@media (min-resolution: 2dppx) {
border-top: none;
&::before {
@include scale-hairline-common($color, 0, auto, auto, 0);
width: 100%;
height: 1px;
transform-origin: 50% 50%;
transform: scaleY(0.5);
@media (min-resolution: 3dppx) {
transform: scaleY(0.33);
}
}
}
} @else if $direction == right {
border-right: 1px solid $color;
@media (min-resolution: 2dppx) {
border-right: none;
&::after {
@include scale-hairline-common($color, 0, 0, auto, auto);
width: 1px;
height: 100%;
background: $color;
transform-origin: 100% 50%;
transform: scaleX(0.5);
@media (min-resolution: 3dppx) {
transform: scaleX(0.33);
}
}
}
} @else if $direction == bottom {
border-bottom: 1px solid $color;
@media (min-resolution: 2dppx) {
border-bottom: none;
&::after {
@include scale-hairline-common($color, auto, auto, 0, 0);
width: 100%;
height: 1px;
transform-origin: 50% 100%;
transform: scaleY(0.5);
@media (min-resolution: 3dppx) {
transform: scaleY(0.33);
}
}
}
} @else if $direction == left {
border-left: 1px solid $color;
@media (min-resolution: 2dppx) {
border-left: none;
&::before {
@include scale-hairline-common($color, 0, auto, auto, 0);
width: 1px;
height: 100%;
transform-origin: 100% 50%;
transform: scaleX(0.5);
@media (min-resolution: 3dppx) {
transform: scaleX(0.33);
}
}
}
} @else if $direction == all {
border: 1px solid $color;
border-radius: $radius;
@media (min-resolution: 2dppx) {
position: relative;
border: none;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid $color;
border-radius: $radius * 2;
transform-origin: 0 0;
transform: scale(0.5);
box-sizing: border-box;
pointer-events: none;
}
}
}
}
@mixin hairline-remove($position: all) {
@if $position == left {
border-left: 0;
&::before {
display: none !important;
}
} @else if $position == right {
border-right: 0;
&::after {
display: none !important;
}
} @else if $position == top {
border-top: 0;
&::before {
display: none !important;
}
} @else if $position == bottom {
border-bottom: 0;
&::after {
display: none !important;
}
} @else if $position == all {
border: 0;
&::before {
display: none !important;
}
&::after {
display: none !important;
}
}
}
2. 使用：
（1）导入 hairline.scss 文件
@import '@/assets/styles/hairline.scss';（2）调用：@include hairline('方向', 颜色);
.testBox_hairline {
width: 100px;
height: 100px;
background-color: tan;
@include hairline('all', #f00);
}（3）页面组件中使用
{/* 普通 1px 边框 */}
<div className="testBox"></div>
{/* 优化后 1px 边框 */}
<div className="testBox_hairline"></div>五、配置视口自适应
通过 webpack 插件将 px 单位自动转换成视口长度单位 vw/vh，实现页面对不同屏幕的自动适配
1.安装 postcss-px-to-viewport
包的作用：将 px 转化为 vw，所以有了该工具，只需要在代码中写 px 即可
npm i postcss-px-to-viewport -D2.在 craco.config.js 添加相应配置（如果没有此文件就在项目根目录新建）
const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
// 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
viewportWidth: 375
})
module.exports = {
// 此处省略 webpack 配置
webpack: {},
style: {
postcss: {
mode: "extends",
loaderOptions:{
postcssOptions: {
ident:"postcss",
plugins: [vw]
}
}
}
}
}
3.在 src\assets\styles\index.scss 添加测试类名
.testBox {
width: 100px;
height: 100px;
background-color: pink;
}4.在 src\App.tsx 使用测试类名
export default function App() {
return (
<div>
<h1>根组件</h1>
+ <div className="testBox">盒子</div>
</div>
)
}5.重启脚手架
六、配置组件库（ antd-mobile ）
官方文档(国内站点)：https://antd-mobile.gitee.io/zh
1.安装 antd-mobile
npm i antd-mobile2.使用组件
+import { Button } from 'antd-mobile'
export default function App() {
return (
<div>
<h1>根组件</h1>
+ <Button color="primary">按钮</Button>
</div>
)
}antd-mobile v5 版支持按需加载，无需额外配置
七、配置 router
基本配置
1.安装 react-router-dom v5.3版
npm i react-router-dom@5.32.由于 react-router-dom@5.3 源码是用JS` 写的，需要额外的类型声明文件
npm i @types/react-router-dom@5.3 -D
// 下载其他第三方包
npm i @types/第三方包名 -D常见问题：若下载的某个第三方包源码是用 JS 写的，在 TS 项目中可能会报错。
解决方案：通过 npm i @types/第三方包名 下载包的类型声明文件，一般都能解决错误。
3.创建布局容器组件 src\pages\Layout\index.tsx
export default function Layout() {
return (
<h1>布局容器组件</h1>
)
}4.创建登录页面组件 src\pages\Login\index.tsx
export default function Login() {
return (
<h2>登录页</h2>
)
}5.根组件 src\App.tsx 引入页面组件并配置路由：
import React from 'react'
+import { BrowserRouter as Router, Route, Switch, Redirect, } from 'react-router-dom'
+import Login from '@/pages/Login'
+import Layout from '@/pages/Layout'
export default function App() {
return (
<>
+ <Router>
+ <Switch>
+ <Redirect exact path='/' to='/layout' />
+ <Route path="/login" component={Login} />
+ <Route path="/layout" component={Layout} />
+ </Switch>
+ </Router>
</>
)
}
路由设置懒加载
1.使用React.lazy()方法，导入组件
-import Login from '@/pages/Login'
-import Layout from '@/pages/Layout'
+const Login = React.lazy(() => import('@/pages/Login'))
+const Layout = React.lazy(() => import('@/pages/Layout'))
2.使用React.Suspense 组件包裹Switch组件，并设置加载状态
import React from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect, } from 'react-router-dom'
const Login = React.lazy(() => import('@/pages/Login'))
const Layout = React.lazy(() => import('@/pages/Layout'))
export default function App() {
return (
<>
<Router>
+ <React.Suspense fallback={<div>loading...</div>}>
<Switch>
<Route path="/login" component={Login} />
<Route path="/layout" component={Layout} />
</Switch>
+ </React.Suspense>
</Router>
</>
)
}
八、配置 404 页面
1.创建 404 页面组件 src\pages\NotFound\index.tsx
import { Button, ErrorBlock, Space } from 'antd-mobile'
import { useHistory } from 'react-router'
export default function NotFound() {
const history = useHistory()
return <ErrorBlock title="你要访问的页面不见了" description="换个页面试试..." fullPage>
<Space>
<Button color="primary" onClick={() => history.push('/')}>返回首页</Button>
<Button color="warning" onClick={() => history.go(-1)}>后退一步</Button>
</Space>
</ErrorBlock>
}2.根组件 src\App.tsx 引入页面组件：
import React from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect, } from 'react-router-dom'
const Login = React.lazy(() => import('@/pages/Login'))
const Layout = React.lazy(() => import('@/pages/Layout'))
+const NotFound = React.lazy(() => import('@/pages/NotFound'))
export default function App() {
return (
<>
<Router>
<React.Suspense fallback={<div>loading...</div>}>
<Switch>
<Redirect exact from="/" to="/layout" />
<Route path="/login" component={Login} />
<Route path="/layout" component={Layout} />
+ <Route component={NotFound} />
</Switch>
</React.Suspense>
</Router>
</>
)
}
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
