前端系列（一）yarn + react + antd快速上手

第一步：安装yarn

sudo npm install -g yarn

第二步：使用淘宝镜像加速

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

第三步：升级nodejs到最新的版本

sudo yarn global add n
sudo n lts #升级到最新的长期支持版本

第四步：使用yarn创建react应用，推荐使用typescript

yarn create react-app demo --template typescript

第五步：进入demo目录，并添加antd和图标库@ant-design/icons

yarn add antd
yarn add @ant-design/icons

第六步：重命名src/App.css为src/App.less，修改其内容如下：

@import '~antd/dist/antd.less';
@import '~antd/dist/antd.compact.less';

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

第七步：安装@craco/craco和craco-less，用于less样式的处理

yarn add @craco/craco
yarn add craco-less

在demo目录下，添加craco配置文件craco.config.js

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@menu-dark-item-active-bg': '#003a8c',
              '@layout-header-height': '30px',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

修改package.json，使用craco代替react-scripts

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

修改为

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

第八步：启动nodejs，开始工作

yarn start

启动成功的截图

第九步：打开浏览器，访问http://localhost:3000

第一个界面

第十步：编辑src/App.tsx

import React from 'react';
import './App.less';

import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function App() {
  return (
    

      
        

          

          
            nav 1
            nav 2
            nav 3
          
        
        
          
            
              } title="subnav 1">
                option1
                option2
                option3
                option4
              
              } title="subnav 2">
                option5
                option6
                option7
                option8
              
              } title="subnav 3">
                option9
                option10
                option11
                option12
              
            
          
          
            
              Home
              List
              App
            
            
              Content
        
          
        
      
    
  );
}

export default App;

效果图