1.开始正式写页面之前先选择一个比较好用的ui框架，我选择的是Ant Design。
npm install antd --save
按需加载
npm install babel-plugin-import --save-dev
路由
npm install react-router-dom --save
npm install @types/react-router-dom --save
hooks检查
npm install eslint-plugin-react-hooks --save -dev
package.json添加 hooks检查：
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
},
这是运行npm start 会有一下报错:
npmerror.png
重新执行 npm install 重新执行。
2.删除src多余文件
在根目录新建typings文件夹
mkdirlist.png
3.配置tsconfig.json
下面是我的配置，
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"sourceMap":false,
"jsx": "react-jsx",
"experimentalDecorators": true,
"noImplicitAny": false,
"noImplicitThis": false,
"strictNullChecks": false,
"downlevelIteration": true
},
"include": ["src","./typings"],
"typeRoots": ["./typings"],
"exclude": [
"node_modules",
"dist",
"build"
],
"extends": "./paths.json"
}
同级新建paths.json ,解决ts不能识别@路径
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}}
}
剩下的在项目中用到再下载配置吧（ ~ 。_ 。~ ）
