安裝專案
- 安裝全域yarn
- npm i yarn -g
- // 安裝專案
- npx create-react-app 你的專案名 --template typescript
- 進入專案目錄
- cd 你的專案名
- 安裝需要的支持庫(redux,react-router-dom)
- yarn add redux react-redux@types/react-redux -S
- yarn add react-router-dom @types/react-router-dom -S
- 安裝需要的第三庫(antd,babel-plugin-import,axios,mockjs)
- yarn add babel-plugin-import -D
- yarn add antd axios mockjs -S
- node-sass
- yarn add node-sass
配置babel檔案–antd
// .babelrc
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 會加載 less 檔案
}]
]
}
配置mobx—不需要
- yarn add mobx mobx-react -s
- yarn add @babel/plugin-proposal-decorators -D
- yarn add @babel/plugin-proposal-class-properties -D
"babel": {
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"presets": [
"react-app"
]
}
"eslintConfig": {
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
},
"extends": "react-app"
},
宣告全域的變數
// 舉例
import Mockurl from './Mockurl'
declare module 'react'{
interface Component{
$mockurl:any
}
}
Component.prototype
$mockurl = Mockurl
掛在window物件
// store掛在在window物件上
import store from './store'
declare global{
interface Window{
store:any
}
}
window.store = store
antd參考報錯
解決措施
- 洗掉掉index.tsx中的<React.StrictMode>
StrictMode 目前有助于：
- 識別不安全的生命周期
- 關于使用過時字串 ref API 的警告
- 關于使用廢棄的 findDOMNode 方法的警告
- 檢測意外的副作用
- 檢測過時的 context API
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/131871.html
標籤：其他
下一篇：RSA的生成原理和數學原理