設置淘寶鏡像
初始化項目
yarn init -y npm init -y
下載項目的所有聲明的依賴
yarn npm install yarn與npm 使用效果相同
項目及開發
使用create-react-app(腳手架)搭建項目
npm install -g creact-react-app 全局下載工具
creact-react-app react-admin 下載模板項目，名稱為react-admin
cd react-admin
npm start 訪問localhost:3000
1.下載組件庫包 yarn add antd
2.實現組件的按需打包
1)下載依賴模塊 yarn add react-app-rewired customize-cra babel-plugin-import
2)定義加載配置的js模塊：config-overrides.js const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
// 針對antd實現按需打包，根據import來打包（使用的babel-plugin-import）名字只需import引入即可
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css', // 自動打包相關的樣式
}),
);
3)修改配置: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文件--不會按需加載
"scripts": { "start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" },
這樣可以注釋掉index引入的全部樣式
// import 'antd/dist/antd.min.css' // 引入antdcss樣式注釋掉，按需加載
自定義antd主題
下載工具包 yarn add less less-loader
修改config-overrides.js
const {override, fixBabelImports, addlessLoader} = require('customize-cra');
module.exports = override( // 針對antd實現按需打包，根據import來打包（使用的babel-plugin-import）名字只需import引入即可 fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true, // 自動打包相關的樣式 }),
addLessLoader({
javascriptEnabled: true,
modifyVars: {'@primary-color': '#1DA57A'}, //顏色
}),
);
引入路由
下載路由包 yarn add react-router-dom