一、创建项目
使用脚手架命令创建新项目:
1.通过命令行创建项目
npx create-react-app ts-geek-park-h5 --template typescript
2.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 -f
2.在项目根目录中创建 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 sass
2.在 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 -D
2.在 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-mobile
2.使用组件
+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.3
2.由于 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>
</>
)
}