役に立った場合は、「いいね！」をしてください。また、時間があれば、コメントすることもできます。
- 足場ツールの設置
cmd命令：npm install -g create-react-app 或者 cnpm install -g create-react-app
- プロジェクトを作成します。
create-react-app actdemo
cd を使って、reactdemo
npm start または Yarn start を
実行します。 プロジェクトの実行後、ブラウザが自動的に開きます。または、ブラウザで http://localhost:3000 に手動でアクセスして、基本的な React プロジェクトを実行することもできます。生み出されるだろう
2. antd および使用可能なパッケージをインストールする
//路由
npm install react-router-dom --save
//请求
npm install axios --save
//安装UI -- antd
npm install antd --save
//按需加载
npm install react-app-rewired customize-cra babel-plugin-import --save
- package.jsonの構成を変更する
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
- プロジェクトのディレクトリに新しい config-overrides.js ファイルを作成します。
const {
override, fixBabelImports,addWebpackAlias } = require('customize-cra')
// fixBabelImports 按需加载antd组件
const path = require('path')
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
}),
//路径配置
addWebpackAlias({
['@']: path.resolve(__dirname, 'src')
})
)
- .この時点で、基本構成はデプロイされました。サーバーを再起動することを忘れないでください。antd
公式ドキュメントが添付されています。