creat-react-app和antd、react-router

create-react-app(typescript版)

$ yarn create react-app supplier-admin --template typescript

然后我们进入项目并启动。

cd supplier-admin
yarn start

localhost:3000 便可以看到 welcome react 的欢迎页面

引入 antd

1. 安装 antd

   yarn add antd
   

   汉化 antd 默认展示, 在 src/app.tsx 中

   import React from 'react';
   import { ConfigProvider } from 'antd';
   import zhCN from 'antd/lib/locale/zh_CN';
   import Home from './page/Home';
   import './App.css';
   
   function App() {
     return (
       <ConfigProvider locale={zhCN}>
         <Home />
       </ConfigProvider>
     );
   }
   
   export default App;
   

   修改 src/App.css 引入 antd 的样式。

   @import '~antd/dist/antd.css';
   

2. 安装 customize-cra。

   $ yarn add react-app-rewired customize-cra
   

   修改 package.json 文件

   "scripts": {
       -   "start": "react-scripts start",
       +   "start": "react-app-rewired start",
       -   "build": "react-scripts build",
       +   "build": "react-app-rewired build",
       -   "test": "react-scripts test",
       +   "test": "react-app-rewired test",
       }
   

   在项目根目录创建一个 config-overrides.js 用于修改默认配置

   module.exports = function override(config, env) {
         // do stuff with the webpack config...
         return config;
       };
   

3. 安装 babel-plugin-import

   $ yarn add babel-plugin-import
   

   修改 config-overrides.js 文件

   + const { override, fixBabelImports } = require('customize-cra');
   
   - module.exports = function override(config, env) {
   -   // do stuff with the webpack config...
   -   return config;
   - };
   
   + module.exports = override(
   +   fixBabelImports('import', {
   +     libraryName: 'antd',
   +     libraryDirectory: 'es',
   +     style: 'css',
   +   }),
   + );
   

4. 配置主题颜色

   安装 less , less-loader

   yarn add less
   yarn add less-loader
   

   修改 config-overrides.js文件

   - const { override, fixBabelImports } = require('customize-cra');
   + const { override, fixBabelImports, addLessLoader } = require('customize-cra');
   
   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
   -   style: 'css',
   +   style: true,
     }),
     
   + addLessLoader({
   +   javascriptEnabled: true,
   +   modifyVars: { '@primary-color': '#1DA57A' },
   + }),
   );
   

react-router

安装 react-router-dom

yarn add react-router-dom

修改 index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();