yarn 包管理器

• 安装
• 常用命令
  • yarn init 初始化生成 package.json （npm init）
  • yarn add 包名 安装生产依赖 （npm i 包名）
  • yarn add 包名 --dev 安装开发依赖 (npm i 包名 -D)
  • yarn remove 包名 删除依赖 (npm uninstall 包名)
  • yarn 按照 pacakge.json 中的依赖信息，依次安装包。 等同于 npm i - yarn start / yarn dev 运行项目

AntDesign 组件库使用

使用

• 安装yarn add antd
• 安装 icon 图标库yarn add @ant-design/icons
• 在项目组件中按需引入 antd 组件并使用

import { Button } from "antd";

<Button type="primary">按钮</Button>

自定义主题配置

• 在index.js

import { ConfigProvider } from "antd"; //主题配置

 <ConfigProvider
      theme={{
        token: {
          colorPrimary: "#00b96b",
        },
      }}
    >
      <App />
    </ConfigProvider>

react 项目的自定义配置

• craco 配置
• 安装 yarn add craco
• 项目根目录新建 craco.config.js

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

路径别名配置

• craco-alias 文档
• 安装yarn add craco-alias -D
• 在 craco.config.js 中配置

// Nodejs 配置语法
const CracoAlias = require("craco-alias");
const path = require("path");
module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      // 添加您的其他路径别名配置
    },
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        // 别名配置的文件路径
        source: "options",
        // 是否从options别名配置中读取
        // 请根据实际情况修改下面的路径
        baseUrlShouldExist: false,
        aliases: {
          "@": "./src",
          // 添加您的其他路径别名配置
        },
      },
    },
  ],
};

• 重新启动项目