- 优化 import
- 使用 styled-components
- 统一 css
- React-router
- 使用 SVG 图片
1. 优化 import
在 tscinfig.json 中添加，可以吧 src 当做根目录路直接 import “app.tsx”
"compilerOptions": {
+ "baseUrl": "src",
}
2. 使用 styled-components
使用 styled-components 进行 css
安装
yarn add styled-components
yarn add --dev @types/styled-components
使用
import styled from 'styled-components'
const Button = styled.button`
color:red
`
const App = ()=>{
return (
<Button></Button>
)
}
3. 统一 css
在 scss 或者 css 文件中添加
@ihelpermport-normalize;
4. React-router
设置 404 页面
<Switch>
<Route path="*">
404,页面不存在
</Route>
</Switch>
设置默认显示页
<Switch>
<Redirect exact from="/" to="/money">
</Switch>
5. 跨平台 CSS 中文字体解决方案
6. 使用 SVG 图片
如果在项目中使用 SVG 图片，需要借助 svg-sprite-loader 进行编译 配置方法如下
- 显示 react 的配置文件
yarn eject
- 安装 svg-sprite-loader
yarn add --dev svg-sprite-loader
yarn add --dev svgo-loader
- 配置 config/webpack.config.js
oneOf:[
{
test: /\.svg$/,
use: [
{ loader: 'svg-sprite-loader', options: {} },
{loader:'svgo-loader',options:{}}
]
}
]
svgo-loader:SVG 优化 svg-transform-loader: 对 SVG 图片进行优化 (不需要)
4. 配置完成后需要重新运行项目
yarn start
- 引入 SVG 图片
require("../icons/test.svg")
<svg fill="red" className="className">
<use xlinkHref="#test(文件名)"/>
<svg>
== 如果使用 import xx from “” 引入会触发 TreeShaking 机制，react 会自动删除 ==
