> 文章列表 > 【react】react创建项目与引入AntD组件库:

【react】react创建项目与引入AntD组件库:

【react】react创建项目与引入AntD组件库:

文章目录

        • 一、初始化项目
            • 【1】创建项目
          • 【法一】
            • 【1】暴露项目配置文件
            • 【2】安装依赖
            • 【3】配置less
          • 【法二】
        • 二、快捷键:
            • 【1】`rcc+tab`
        • 三、安装AntD组件库:
            • 【1】安装
            • 【2】index.js
            • 【3】问题:
            • 【4】效果:

一、初始化项目:

【1】创建项目

npx create-react-app xxx //xxx为项目名称

【法一】
【1】暴露项目配置文件

npm run eject

【react】react创建项目与引入AntD组件库:

【2】安装依赖

npm i react-router-dom axios -D

yarn add less less-loader@5.0.0 -D

【3】配置less

复制sass的,改成less

【react】react创建项目与引入AntD组件库:
【react】react创建项目与引入AntD组件库:

【法二】

【react】react创建项目与引入AntD组件库:
【react】react创建项目与引入AntD组件库:

const CracoLessPlugin = require('craco-less');
const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir)module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {// less  modifyVars=>全局配置modifyVars: { '@primary-color': '#1DA57A' },javascriptEnabled: true,}}}}],webpack: {alias: {'@': resolve('src'),'@api': resolve('src/api'),'@assets': resolve('src/assets'),'@components': resolve('src/components'),'@views': resolve('src/views'),}}
};

二、快捷键:

【1】rcc+tab

【react】react创建项目与引入AntD组件库:

三、安装AntD组件库:

【1】安装

npm install antd --save

【2】index.js

【react】react创建项目与引入AntD组件库:

【3】问题:

【解决办法】:http://t.csdn.cn/dlh8U
【react】react创建项目与引入AntD组件库:

【4】效果:

【react】react创建项目与引入AntD组件库:
【react】react创建项目与引入AntD组件库: