![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
获得徽章 0
- react配置src的@别名使用craco配置npm install @craco/craco@alpha -D
1、创建craco.config.js文件：
const path = require('path')
const resolve = (dir) => path.resolve(__dirname,dir)
module.exports = {
webpack: {
alias:{
'@': resolve('src')
}
}
}
2、修改ts配置
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
3、修改package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},展开评论1 - 格式化的配置npm install prettier -D
在package.json加上命令"prettier": "prettier --write ."
然后配置这三个文件
1、.editorconfig
root = true
[*] #·表示所有文件适用
charset = utf-8 #-设置文件字符集为·utf-8
indent_style = space #-缩进风格(tab / space)
indent_size = 2#·缩进大小
end_of_1ine = lf #-控制换行类型(lf·|·cr-|-crlf)
trim_trailing_whitespace = true #-去除行尾的任意空白字符
insert_final_newline = true #·始终在文件末尾插入一个新行
[*.md] #·表示仅-md-文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
2、.perttierrc
{
"useTabs": false,
"tabwidth": 2,
"printwidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
3、.perttierignore
/build/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*展开评论1 - env获取安全距离的使用
{ /* 确保页面内容在安全区域内 */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
/* 提供回退值，当env不支持时使用0 */
padding-top: constant(safe-area-inset-top); /* iOS <11.2 */
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
}
</style>展开评论2 - 分享一个好用的CSS居中方法，以及盒子随内容的多少而变化的方法fit-content
position: absolute;
top: 10vh;
left: 0;
right: 0;
margin: auto;
width: fit-content; //*****很关键设置内容为多大，盒子就多大展开25 - 渐变背景的制作
：.pageBg{
background:
linear-gradient(to bottom,rgba(0,0,0,0),#fff 400rpx),
linear-gradient(to right,#beecd8 20%,#f4e2d8);
min-height: 80vh;
}展开评论1
![[微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)